I am stuck in this React Problem

[kaurCodes]

Tell us what’s happening:

My code output works fine, but still, I’m getting this error-
" Typing in the input element should update the state and the value of the input, and the

p

element should render this state as you type."

I am unable to figure out what’s wrong and move on to the next challenge.

Your code so far

class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  }; 
  this.handleChange=this.handleChange.bind(this);
}
handleChange(event)
{
  this.setState({
    input:event.target.value
    });
}

render() {
  return (
    <div>
      <input value={this.state.value} onChange={this.handleChange.bind(this)}/>
      
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

freeCodeCamp.org

[sitek94]

When I submit your code it passes all the tests.

Maybe try resetting the challenge / refreshing the browser / disabling extensions (if you have any). These solutions work for some people who have similar issues, hope it helps you too

[kaurCodes]

Thanks for quick reply. Did all you said. Still I am getting same errors.

[jwilkins.oboe]

@kaurCodes

value={this.state.value}

The issue for me when I ran it was this line.

The only thing you have assigned to state is the input.
So I would try that.

Then it would match up with this line here.

@kaurCodes

<p>{this.state.input}</p>

[sitek94]

Sorry, my bad! I must have had old code already saved for that challenge and this is why it passed the test for me.

@jwilkins.oboe is absolutely right, the real issue is here:

value={this.state.value}