Help with React: why is 'this' causing problems here?

Hey everyone!
I’m making a little app with React in order to put everything I’ve learnt so far into practice.
My problem is that I’m getting an error with ‘this’, but I added the necessary binds so I really can’t figure out what’s wrong.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput : '',
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit() {
    const itemsArr = this.state.userInput.split(',');
    this.setState({ 
      listItems: itemsArr
    });
  }

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

  
  render() {
    **const items = this.state.listItems;** -->HERE's MY ERROR - the error highlights the 'this' keyword.
    return (
      <div className="App">
        <header className="App-header">
          This is a header
          <h1 className="App-title">To-Do Lists</h1>
        </header>
        <p className="App-intro">
          So here should be an explanation of how this works.
        </p>
        <Lists />
        <textarea 
          onChange={this.handleChange}
          value={this.state.userInput}
          placeholder="Separate items with commas"
          />
          <button 
           onClick={this.handleSubmit}>
           Create List
           </button>
           <ul>
             {items}
             </ul>
      </div>
    );
  }
}

Can someone figure out what’s going on?
Thanks so much!!!

I believe this is caused by not defining listItems in your original state. It needs to be there on render iirc.

Ex.

this.state = {
  userInput: '',
  listItems: []
}

Nope :frowning: still same error when clicking Submit

Do you have a codepen or is this local?

local. I still haven’t done any react stuff on codepen.

The problem is in the following handleChange method:

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

Put a console.log(event.target) and you will not see an input property. However, there is a property which contains what you want. Read back over the following challenge and see where your mistake is.

https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-input

1 Like

Omg cannot BELIEVE that was the error. Infinite facepalm.
Thanks so much!!!