Tell us what’s happening:
I am trying to find how to map a user’s input into an array using react in this particular problem. how would one go about to concatenate the two or add the user’s input into an array by clicking on the button. In the submitMessage() function.
Your code so far
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this)
}
// Add handleChange() and submitMessage() methods here
handleChange(event) {
this.setState({
input: event.target.value
})
}
submitMessage() {
this.setState({
messages: this.state.messages.map(this.state.input)
})
}
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}/>
<button onClick={this.submitMessage}>Add message</button>
<ul><li>{this.state.message}</li></ul>
{ /* Change code above this line */ }
</div>
);
}
};
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Challenge: Manage State Locally First
Link to the challenge: