React - Create a Controlled Input

[jtlabs777]

Tell us what’s happening:
Describe your issue in detail here.
This React exercise had me create an input field. Whatever is typed in the input field should render just below the h1 tags. However, in the browser view, when I type in the input field, the display goes blank. I tested the code on codepen and it seems to work fine. Please advise.

   **Your code so far**

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, props) => ({input: event.target.value}));

}
 // Change code above this line
 render() {
   return (
     <div>
       { /* Change code below this line */}
       <input type="text" value={this.state.input} onChange={this.handleChange} />
       { /* Change code above this line */}
       <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/104.0.0.0 Safari/537.36

Challenge: React - Create a Controlled Input

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

This is an opportunity work on your debugging skills, one of the most important skills for a dev.

When I type in the input, I see this in the FCC console:

Error, open your browser console to learn more.

When I open the browser console, I see this:

TypeError: Cannot read properties of null (reading 'value') react-dom.production.min.js:110 
    at ControlledInput.<anonymous> (<anonymous>:55:31)
// ...
Uncaught TypeError: Cannot read properties of null (reading 'value') react-dom.production.min.js:126 
    at ControlledInput.<anonymous> (<anonymous>:55:31)

You are accessing that prop here:

handleChange(event) {
  this.setState((state, props) => ({input: event.target.value}));
}

It is saying that event.target is null so it can’t read the property “value”.

If I put in some log statements:

  console.log(`***${event.target.value}***`)
  console.log(typeof event.target.value)

I see that those are defined just fine. So what gives? If I put in a log statement in the callback, I see that it is null in the callback. So, there must be some kind of a scope issue.

That is odd. If I google “react setstate event.target.value” (google - one of the most important tools a dev has), I find this explanation.

So, I see two possible explanations. One would be to pass setState and object - it is not an issue here because it is not based on the previous state. The other option is to store that value in variable so you create a closure.

Read through those steps of debugging. Duplicate them. Seriously, it is one of the most important skills you have. There is no such thing as a competent developer who is not a great debugger.