Input Field Issue On React js - reactjs

Question

Everything is okay until end of the first step but when i write the "tempPhone" numbers for confirm
[First Step][1]
input area seems like that (input field must be empty after clicked first button) and i didnt figure out that problem. why thats happening?
[1]: https://i.stack.imgur.com/qXYB3.png
[2]: https://i.stack.imgur.com/wRc4W.png
[Problem][2]
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: <div>
<input type="text" name="input" onChange={this.handleChange}/>
<button onClick={this.handlePhoneSubmit}> Dogrula!</button>
</div>
}
);
}
handlePhoneSubmit() {
if(this.state.input === this.state.tempPhone){
this.setState(
{
input: ''
}
);
this.pinInput();
}
else {
this.setState({
errorMsg: "wrong phone"
});
}
}
pinInput() {
this.setState(
{
input: '',
otpContent: (<div>
<input
type="text" name="input" onChange={this.handleChange}/>
<button onClick={this.handlePinSubmit}> Pin Dogrula!</button>
</div>)
}
);
}
handlePinSubmit() {
if(this.state.input === this.state.tempPin){
this.setSuccess();
}
else {
this.setState({
errorMsg: "wrong pin"
});
}
}
setSuccess() {
this.setState(
{
otpContent: (<div>
<h3>Success!</h3>
</div>)
}
);
}
componentDidMount() {
this.phoneInput();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Hi</h1>
</header>
<div className="App-intro">
{this.state.otpContent}
{this.state.errorMsg}
</div>
</div>
);
}
}
export default App;

Answer 1

Your handling input logic is a little bit flawed. You are trying to use a controlled input element but at the same time you need to set a value to it that I think which is a bad mix. I am giving an example but I've changed the component logic too much. If it does not suit you just examine this answer as an example.
I don't hold any JSX in the state since I've never seen it (but who knows?), I've changed some rendering content and message logic. I've also use class-fields and arrow functions, so no need to bind them to this.
class App extends React.Component {
state = {
input: "",
tempPhone: "123",
tempPin: "123456",
msg: "",
confirm: false,
}
handleChange = e => this.setState({ [e.target.name]: e.target.value });
handlePhoneSubmit = () => {
if (this.state.input === this.state.tempPhone) {
this.setState({confirm: true, input:""});
}
else {
this.setState({
msg: "wrong phone"
});
}
}
handlePinSubmit = () => {
if (this.state.input === this.state.tempPin) {
this.setState({msg: "Success"});
}
else {
this.setState({
msg: "wrong pin"
});
}
}
phoneInput = () => (
<div>
<input type="text" value={this.state.input} name="input" onChange={this.handleChange} />
<button onClick={this.handlePhoneSubmit}> Dogrula!</button>
</div>
);
pinInput = () => (
<div>
<input
type="text" value={this.state.input} name="input" onChange={this.handleChange} />
<button onClick={this.handlePinSubmit}> Pin Dogrula!</button>
</div>
)
render() {
return (
<div className="App">
<div className="App-intro">
{!this.state.confirm
? this.phoneInput()
: this.pinInput()
}
{this.state.msg}
</div>
</div>
);
}
}
Still, this code can be improved. For example there could be one Input component, we can pass some props to render different input and buttons. But it works according to your needs right now.

Answer 2

You can handle this situation by using a controlled component (docs).
here you need to handle onChange and pass the changed value to input. On button press reset that value
<input
value={this.state.textValue} // whatever value you put in textValue state will be the text appear in input box on UI so
type="text"
onChange={e => this.handleTextChange(e.target.value)}
/>
codesandbox : here