Mapping over the array 'messages' property / build error

** Mapping method in bellow code results in ‘build error’ message. In console, the error is ‘can not read map property of undefined’.
I am guesssing that x and i parameters are not read properly, but that is just a guess.
Section of the code is in the render method, rendering list items.Can you please help.**
Describe your issue in detail here.

  **render() {
return (
  <div>
    <h2>Type in a new Message:</h2>
    { /* Render an input, button, and ul below this line */ }
  <input value={this.state.input} onChange={this.handleChange.bind(this)} />
  <button type='submit' onClick={this.submitMessage.bind(this)}>Submit</button>

     <ul>
      {this.state.messages.map((x, i)=>{
        return <li key={i}>{x}</li>
      })}
    </ul>


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

}**


class DisplayMessages extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
   }
}

handleChange(event) {
  this.setState({
    input: event.target.value,
    messages: this.state.messages
  })
}
submitMessage(){
  this.setState({
    input: '',
    messages: [...this.state.messages, this.state.input]
  })
}


// Add handleChange() and submitMessage() methods here

render() {
  return (
    <div>
      <h2>Type in a new Message:</h2>
      { /* Render an input, button, and ul below this line */ }
    <input value={this.state.input} onChange={this.handleChange.bind(this)} />
    <button type='submit' onClick={this.submitMessage.bind(this)}>Submit</button>

       <ul>
        {this.state.messages.map((x, i)=>{
          return <li key={i}>{x}</li>
        })}
      </ul>


      { /* Change code above this line */ }
    </div>
  );
}
};
  **Your browser information:**

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

Challenge: Manage State Locally First

Link to the challenge:

Hi @Deyan11 !

What happened in the state?

It looks like you deleted what was originally there.
You weren’t supposed to delete this messages:[]
You can’t map through something that is not there :grinning:

Hope that helps!

1 Like

It does help!
I am actually learning a lot by making theese blunders (not doing it purpose!)
This helps a lot!
Thank you.

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