React.js - Why my code does not render correctly in this FCC course

In the FCC course Front End Library → React → Create Controlled Input

When I write the method handleChange(), I pass an arrow function to this.setState but it cannot render correctly.

I’d like to understand the logic behind, and I need some help to get my head straight.
Do you know what’s happening behind?

In the code below, inside handleChange() method

  • if using arrow function in this.setState(), the browser console returns error message: type error: cannot read properties of null (reading ‘value’)
class ControlledInput extends React.Component {
  constructor(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) {
      state => ({
      // Delete "state =>" above then the whole code works
      // if leave the arrow function in it , it shows type error: cannot read properties of null (reading 'value')
  // Change code above this line
  render() {
    return (
        { /* Change code below this line */}
        <input value={this.state.input} onChange={this.handleChange} />
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>

I think It would be better for us to answer, If you provide your full Component Code

You’re totally right.
I’ve updated the post with the code I use

I’m not familiar with React Class Component. So I searched it in Google and Find out answer in Stackoverflow
Link above!

1 Like

I think this behavior is because the event inside the nested arrow function is undefined. But I’m not sure. In any case you are not using state in the function, so beter to leave it out. I don’t think that would be problematic. Hope this helps.

1 Like

Wow, thanks a million! That post is very concise.
I need to study Asynchronous behavior more, but now I get 90% of the underlying logic.