React And Redux Manage State Locally First Help!

JavaScript
1

Tell us what’s happening:

Hey guys so I am having a hard time understanding why this doesn’t pass any help would be greatly appreciated, thanks again for all your help so far!

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,
      messages: this.state.messages
    });
  }

  submitMessage() {
     event.target.value = '';
     this.setState({
       messages: this.state.messages.concat(this.state.input),
       input: ''
     });
  }
render() {
  
 const mappy =  this.state.messages.map((item) => <li key = {item + 1}>{item}</li>);
  return (
    <div>
      <h2>Type in a new Message:</h2>
      { /* render an input, button, and ul here */ }
      <input onChange = {this.handleChange} value = {this.state.input}/>
      <button onClick = {this.submitMessage}>Submit</button>
      <ul>{mappy}</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/81.0.4044.113 Safari/537.36.

Challenge: Manage State Locally First

Link to the challenge:

2

I’m curious why you are setting event.target.value in submitMessage.

You have a JS function inside the render method which isn’t going to work.

3

yeah i figured this out eventually but idk what I was thinking lol, this section has got me hung up real bad conceptually

4

Keep pushing through. It’s the painful learning that leads to breakthroughs. :slight_smile:

1 Like