React and Redux: Manage State Locally First doesn't recognise .map

JavaScript
1

Tell us what’s happening:

I am using .map to loop through messages and I still do get the error to use .map

Your code so far


class DisplayMessages extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    messages: []
  }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
}
// add handleChange() and submitMessage() methods here
handleChange(e){
  this.setState({input:e.target.value})
}
submitMessage(e){
  e.preventDefault();
  this.setState(({messages,input}) =>({
    messages:[...messages,input],
    input:''
  }))
}
render() {
  const {input,messages} = this.state;
  return (
    <div>
      <h2>Type in a new Message:</h2>
      { /* render an input, button, and ul here */ }
      <input type="text" value={input} onChange={this.handleChange}/>
      <button type="submit" onClick={this.submitMessage}>Add</button>
      <ul>
        {messages.map((message,i)=><li key={i}>{message}</li>)}
      </ul>
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0.

Challenge: Manage State Locally First

Link to the challenge:

2

Apparently test didn’t expect destructuring of this.state in the render. If you replace messages.map with this.state.messages.map tests pass.

3 Likes
3

Sanity is correct. Your code works fine without a doubt. However, destructuring does not seem to be covered by the test. Thus, to pass the test, you will have to update your code from this:

<ul>
    {messages.map((message,i)=><li key={i}>{message}</li>)}
</ul>

to this:

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

Good job! :slight_smile:

1 Like