React and Redux - Manage State Locally First

Tell us what’s happening:
Cannot read properties of undefined (reading 'state') , i do not understand why?. My state is fine (IMO) looking at the code.

Your code so far

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(e){
    this.state.input = e.target.value;
  }
  submitMessage(){
    //this.state.messages.push(this.state.input)
    console.log(this.state)
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
           <input 
              name='input'
              onChange={(event)=>{
             this.handleChange(event)
           }} type="text" />
           <button 
           onClick={this.submitMessage}>
           Submit
           </button>
           <ul>

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: React and Redux - Manage State Locally First

Link to the challenge:

I started to check hint and turns out I was missing setState but now I got new error
react-dom.production.min.js:144 Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(e){
    this.setState({
      input: e.target.value
    })
  }
  submitMessage(){
    this.setState({
      message: message.push(this.state)
    })
    console.log(this.state)
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
           <input 
              name='input'
              onChange={
             this.handleChange.bind(this)
           } type="text" />
           <button 
           onClick={this.submitMessage}>
           Submit
           </button>
           <ul>

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

I am stalling very much, is it ok?
It would be nice if someone teach me how to read React error in dev tools, so much going on.

The production versions of React are not the best for debugging. It might be nice if the challenges were using the development versions.


  1. The error is inside a setState call.
handleChange(e){
  this.setState({
    input: e.target.value
  })
}

That looks fine so let’s go to the next one.

submitMessage(){
  this.setState({
    message: message.push(this.state)
  })
  console.log(this.state)
}

That does not look right.

  1. The identifier message is not available in any scope.

  2. messages (plural) is a property on the state object.

  3. Do not use mutating methods on the state.

  4. The return of .push() is the length of the array after the push. That is not what you want to assign to the state. I would use the spread syntax { someProp: [...stateProp, newValue] } for the setState call.

  5. The submitMessage method has not been bound (bind it or use arrow syntax).

  6. You are not mapping the state inside the UL.

1 Like

Hi, not sure what u mean by newValue and also why I want to map ?

  1. In this case, newValue would be this.state.input. So you set messages to an array with all the values inside messages spread in, plus the current value of this.state.input
const list = [1, 2, 3];
const newElement = 4;

const newList = [...list, newElement];
  1. Because that is the requirement. You have to map over the messages array and render it.