React: Create a Controlled Input, problem passing the test

freeCodeCamp Support
1

I’m trying to pass (React: Create a Controlled Input), the code is working just fine with the expected results rendered in the browser, however, when I run the test, I get an error:

Typing in the input element should update the state and the value of the input, and the

element should render this state as you type.

I don’t know what I’m missing since as I said, the code is running just fine with the value of

changing!
Here’s my solution:

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(){
    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.bind(this)} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
2

Welcome, sergeod.

I am still debugging if this is an issue with the tests, but your issue is this:

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

You reference event but never define it. Somehow, everything appears to be working, but I do not know why.

As an aside: I am not sure why you are calling the function like this:

onChange = {this.handleChange.bind(this)}

Especially, when you have this line:

this.handleChange = this.handleChange.bind(this)

Hope this helps

3

Thank you for your reply Sky020,
I had some difficulties with this exercise since I didn’t know how to pass the argument event in the onChange in JSX, so I clicked the help, the help page suggests to do the binding this way, within the JSX, I changed this to be

onChange = {this.handleChange}

the code is still working, but still can’t pass the test.
When I first tried this challenge, I passed the event as a parameter for the handleChange method, like this:

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

but it didn’t work.
On a side note, I googled this and I found a solution on how to pass an argument with onChange event in JSX, but it didn’t work, the solution was to pass an anonymous function to the onChange event, with the event passed as an argument:

onChange = {e => handleChange(e) }
4 
handleChange(event){
    this.setState((state)=>({
        input: event.target.value
    }));
}

The above is what worked for me, coupled with:

onChange={this.handleChange}

The idea is, onChange will call the provided function handle with any available arguments. So, often there is no need for:

onChange={e => handleChange(e)}

However, the following causes many issues due to the function being immediately called, upon mount, i think.

onChange={this.handleChange()}

if you are struggling to pass, still, I suggest you post all of your current code, and we can debug.

Hope this clarifies.

5

Really appreciate your time and help Sky020,

I tried this, I’m getting an error, in the console:
TypeError cannot read property ‘value’ of null
that’s coming from react-dom.production.min.js:126
My amended code:

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} />
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
6

No worries. Your code passes for me.

So, this sounds like a cache issue. If you could hard-refresh the browser page, then try again, I believe it will work.

7

I did a hard-refresh, this didn’t solve the problem, I closed the tab, reopened, then clicked test, the test is running fine now, but instead of continuing to the next challenge, I tried to type in the input field in the browser, I got the same error! the TypeError with ‘value’ evaluated to null.
So what’s happening is this, the test is passing when it shouldn’t, or there’s a problem with the compiler, where it should run fine while it’s throwing an error.

8

It appears to be an issues with using an updater function within setState as opposed to passing an object:
Causes error :arrow_down:

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

Does not cause error :arrow_down:

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

Great, thank you Sky020,
In this case, may I suggest to review the challenge labled ( React: Use State to Toggle an Element), because this is how it’s explained there.
Link