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

JavaScript
1

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!!!

2

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: []
}
3

Nope :frowning: still same error when clicking Submit

4

Do you have a codepen or is this local?

5

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

6

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.

1 Like
7

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