Frontend development react and redux (Manage State Locally First)

[mr.chan1997]

Tell us what’s happening:

  **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(){
  this.setState({
    input:'',
    messages:[...this.state.messages, 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}>  Submit </button>
      <ul>
        {this.state.messages.map((x, i)=>{
          return <li key={i}>{x}</li>
        })}
      </ul>

      { /* Change code above this line */ }
    </div>
  );
}
};

i dont understand the menaing of these code
{this.state.messages.map((x, i)=>{
return

{x}

})}

The x and i stand for what ??

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15.

Challenge: Manage State Locally First

Link to the challenge:

freeCodeCamp.org

[Sky020]

Hello there,

I suggest you review this lesson:
Learn Functional Programming: Use the map Method to Extract Data from an Array | freeCodeCamp.org

Or, if you prefer the documentation: Array.prototype.map() - JavaScript | MDN (mozilla.org)

Hope this helps