title: Input Field Issue On React js
body: <p>Everything is okay until end of the first step but when i write the "tempPhone" numbers for confirm 
  [First Step][1]</p>
  
  <p>input area seems like that (input field must be empty after clicked first button) and i didnt figure out that problem. why thats happening?<br>
        [1]: <a href="https://i.stack.imgur.com/qXYB3.png" rel="nofollow noreferrer">https://i.stack.imgur.com/qXYB3.png</a>
        [2]: <a href="https://i.stack.imgur.com/wRc4W.png" rel="nofollow noreferrer">https://i.stack.imgur.com/wRc4W.png</a></p>
  
  <p>[Problem][2]</p>
  
  <pre><code>  import React, { Component } from 'react'; 
    import logo from './logo.svg';
    import './App.css';
  
    class App extends Component {
  
    constructor() {
      super();
  
      this.state= {
        otpContent: "",
        input: "",
        tempPhone:"123",
        tempPin: "123456",
        errorMsg: ""
      }
  
      this.handleChange = this.handleChange.bind(this);
      this.handlePhoneSubmit = this.handlePhoneSubmit.bind(this);
      this.handlePinSubmit = this.handlePinSubmit.bind(this);
    }
  
    handleChange(e) {
      this.setState({[e.target.name]: e.target.value});
    }
  
    phoneInput() {
      this.setState(
        {
          otpContent: &lt;div&gt;
              &lt;input type="text" name="input" onChange={this.handleChange}/&gt;
              &lt;button onClick={this.handlePhoneSubmit}&gt; Dogrula!&lt;/button&gt;
          &lt;/div&gt;
        }
      );
    }
  
    handlePhoneSubmit() {
      if(this.state.input === this.state.tempPhone){
        this.setState(
          {
          input: ''
          }
        );
        this.pinInput();
  
      }
      else {
        this.setState({
          errorMsg: "wrong phone"
        });
      }
    }
  
    pinInput() {
      this.setState(
        {
          input: '',
          otpContent: (&lt;div&gt;
              &lt;input
   type="text" name="input" onChange={this.handleChange}/&gt;
              &lt;button onClick={this.handlePinSubmit}&gt; Pin Dogrula!&lt;/button&gt;
          &lt;/div&gt;)
        }
      );
    }
  
    handlePinSubmit() {
      if(this.state.input === this.state.tempPin){
        this.setSuccess();
      }
      else {
        this.setState({
          errorMsg: "wrong pin"
        });
      }
    }
  
    setSuccess() {
      this.setState(
        {
          otpContent: (&lt;div&gt;
              &lt;h3&gt;Success!&lt;/h3&gt;
          &lt;/div&gt;)
        }
      );
    }
  
    componentDidMount() {
      this.phoneInput();
    }
  
    render() {
        return (
          &lt;div className="App"&gt;
            &lt;header className="App-header"&gt;
              &lt;img src={logo} className="App-logo" alt="logo" /&gt;
              &lt;h1 className="App-title"&gt;Hi&lt;/h1&gt;
            &lt;/header&gt;
            &lt;div className="App-intro"&gt;
             {this.state.otpContent}
             {this.state.errorMsg}
            &lt;/div&gt;
          &lt;/div&gt;
      );
    }
    }
    export default App;
  </code></pre>