Can anyone explain this message mapping to me?

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

I understood every single line of this code except the message mapping (starting from line 31 to line 37) can anyone help me understand it, please?

  **Your code so far**


class DisplayMessages extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    messages: []
  }
}
// Add handleChange() and submitMessage() methods here
handleChange(event) {
  this.setState(({
    input: event.target.value,
    messages: this.state.messages,
  }))
};
submitMessages() {
  this.setState(({
    input: this.state.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 onChange={this.handleChange.bind(this)} value={this.state.input} />
      <button onClick={this.submitMessages.bind(this)}>Submit!</button>
      <ul>
        {
          this.state.messages.map(
            (x, i) => {
              return <li key={i}>{x}</li>
            }
          )
        }
      </ul>
      { /* Change code above this line */ }
    </div>
  );
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Manage State Locally First

Link to the challenge:

2

For each message in state.messages, return a list element with the message as the text

3 
<ul>
        {
          this.state.messages.map(
            (x, i) => {
              return <li key={i}>{x}</li>
            }
          )
        }
      </ul>

This will render a list using messages in component state. A unique key is required if similar element are being rendered, this way react keeps track of similar elements. Using index of messages array as unique key here.

4

The map will return an array of li JSX elements that gets rendered as elements (not as an array) to the DOM.

Code you can try in the editor 
const JSXArray = [
  <h1>This is an array of JSX elements</h1>,
  <h2>They get added to the DOM as elements, not an array.</h2>,
  <p>You can have as many as you like.</p>
];

const preMappedArray = JSXArray.map((jsxElement) => jsxElement);

function DisplayMessages() {
  return (
    <div className="App">
      {[
        <h1>This is an array of JSX elements</h1>,
        <h2>They get added to the DOM as elements, not an array.</h2>,
        <p>You can have as many as you like.</p>
      ]}

      <hr />

      <h2>Below is the same array of elements getting mapped instead using the JSXArray array</h2>

      {JSXArray.map((jsxElement) => jsxElement)}

      <hr />
      <h2>You can do the mapping first as well</h2>
      {preMappedArray}
    </div>
  );
}
5

Thank you very much. You have taught it to me with clarity.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.