** 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:
