My React app don't work

JavaScript
1 
class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line
    this.handleChange=this.handleChange.bind(this);
    // Change code above this line
  }
  // Change code below this line
  handleChange(event){
    this.setState(state=>({
      input : event.target.value
    }))
  }
  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}
        <input value={this.state.input} onChange={this.handleChange}></input>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

I try to do an input date return her value in the p element…but i fail…please need help

1 Like
2

What do you mean by “an input date”? Do you have some other code you haven’t posted?

Your code is passing the challenge (although your use of an updater function isn’t really correct usage).

3

soory it’s that and not “date”////yes i passed the challenge with this code…but i dont have the result that i wait… Normaly after enter an value in my input, i should receive this value in my p element…

explain me why please

4

You are not using the current state for the state update. This means the updater function is not needed and you should just be using an object.

handleChange(event) {
  this.setState({
    input: event.target.value
  })
}


Next. The fCC React curriculum is using React v16.4.0 and because of how React 16 events work (pooling) the event target will be undefined inside the setState updater function.

This is why it crashes when you type into the input Uncaught TypeError: Cannot read property 'value' of null. One option is to use event.persist() or save the value at the top of the handler function (only when an updater function is needed).

React 17 does not work like this anymore (No Event Pooling) so it would work (you still shouldn’t use the updater function unless needed).

Examples:


1 Like