Chrome Browser throws a lot of errors even with correct solution

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
The solution I have is accepted by FCC. However, when I attempt to change anything by typing into the input, Chrome throws errors such as:
TypeError: Cannot read properties of null (reading ‘value’)

Any ideas?

Thanks!

  **Your code so far**


class MyForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    submit: ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
      this.setState((state, props) => ({
        input: event.target.value
 
      }));
}
handleSubmit(event) {
  // Change code below this line
      event.preventDefault();

      this.setState((state, props) => ({
        submit: state.input  

      }));


  // Change code above this line
}
render() {
  return (
    <div>
      <h1>{this.state.submit}</h1>
      <form onSubmit={this.handleSubmit}>
        {/* Change code below this line */}
        <input type="text" value={this.state.input} onChange={this.handleChange}/>
        {/* Change code above this line */}
        <button type='submit' onClick={this.handleSubmit}>Submit!</button>
      </form>
      {/* Change code below this line */}

      {/* Change code above this line */}
    </div>
  );
}
}

  **Your browser information:**

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

Challenge: Create a Controlled Form

Link to the challenge:

2

Try passing an object to this.setState instead of a callback.

1 Like
3

From this challenge’s tutorial:

It says:
Instead, you should pass setState a function that allows you to access state and props. Using a function with setState guarantees you are working with the most current values of state and props.

That’s why I use setState similar to:

  this.setState((state, props) => ({
    ...

  }));

I know you can pass something like:
this.setState({
prop: value
});

So why does using the “preferred” method cause the errors?

What am I missing?

Thanks, in advance, for your continued help.

4

  1. You are not using the current state for anything so you do not need access to it.

  2. React 16 does not allow you to use the event object inside the updater function as you are doing (it will be null).

Check out this post for some more info.

5

Please forgive my density- but why would FCC make the recommendation to use the updater function, especially in the light that you claim that for React 16 it won’t work?

I thought the idea was to use the updater to be sure to be using the latest value of the variables held in the state?

I’m really having a hard time understanding the problem, other than which react version likes what method of coding, as was described.

6

Not sure why you believe it is the recommended way?

The challenge you linked to that introduces the updater function clearly explains when it is needed. If you do not need any of the current state values you do not need the updater function. For the challenge we are talking about in this thread you are not using the current state values for anything so it is safe and preferable to just set the state to the new value.

The way it works in React 16 is just a technical implementation detail, the thread I linked to has some more information. As said it no longer works that way in the newer versions. If you do want to use the updater function with the event object either save the event object to a variable before the call to setState or use event.persist().

7

Hi @lasjorg ,
To be honest, this is something I think wouldn’t come intuitively. Perhaps you want to modify an existing state based on the e.target.value, without specific knowledge of how React works, I would’ve gone down the same rabbit hole.

@josephlevin , here’s an article as well as some solutions regarding this.

8

@theoryofchao I wasn’t suggesting it was intuitive. It’s definitely not and we get posts about this exact issue every so often. The thread I linked explains it and has the same two solutions as the article you linked to.

As pointed out this is only an issue with this challenge because the curriculum is running an old version of React. It’s good to know about for sure, but it’s also a version-specific implementation detail that you really can’t generalize about when talking about the correct use of the updater function.

My point was simply that you do not need to use the updater function for this challenge and really shouldn’t be using it unless you need access to the state/props. There is no reason to call a function that gets passed data (state/props) if you are not going to use the data for anything.

There might also be some confusion here related to the difference between using the current state and updating it.

9

Thank you, all for helping me with this issue. @theoryofchao’s post (marked as a solution) really was useful to me. I think I understand why what I initially tried was throwing errors.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.