Tell us what’s happening:
The Challenge is for us to modify the code and have the input be controlled through the state as well as render an unordered list with the submissions from the input( to sum it up). However i am not getting a pass.
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(event){
this.setState({ input: event.target.value })
}
submitMessage(){
let updatedMessages = [...this.state.messages, this.state.input]
this.setState({
messages: updatedMessages,
input: ''
})
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
{ /* render an input, button, and ul here */ }
<form onSubmit={this.submitMessage}>
<input onChange={this.handleChange} value={this.state.input}/>
<button type='submit'>Add message</button>
</form>
<ul>
{this.state.messages.length > 0 && this.state.messages.map(
i => <li>{i}</li>
)}
</ul>
{ /* change code above this line */ }
</div>
);
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36 OPR/58.0.3135.127.
Link to the challenge:
