Hi guys, you helped me before so I’m posting again. I can’t get my head around this issue yet, why is the state “one step behind” when updating what’s on the input?
Also I can’t tell why this doesn’t pass the last two tests…
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(this);
}
// Add handleChange() and submitMessage() methods here
handleChange(e) {
this.setState({input: e.target.value,
messages: this.state.messages})
console.log(this.state)
}
submitMessage() {
const currentInput = this.state.input;
const newMessages = [...this.state.messages, currentInput];
this.setState({
input: '',
messages: newMessages});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
{ /* Render an input, button, and ul below this line */ }
<input onChange={this.handleChange} value={this.state.input}/>
<button onClick={this.submitMessage}> Submit</button>
<ul>{this.state.messages.map((m,i) => <li key={i}>{m}</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/87.0.4280.88 Safari/537.36.
Challenge: Manage State Locally First
Link to the challenge:
