Confusing syntax in FCC React challenge

JavaScript
1

Just trying to understand some syntax from a FCC React challenge. When mapping over an array to create list elements for a <UL>. The solution given was:

render() {
    const items = this.state.toDoList.map(i => <li>{i}</li>);
    return (
      <div>
        <textarea
          onChange={this.handleChange}
          value={this.state.userInput}
          style={textAreaStyles}
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>
        <ul>
          {items}
        </ul>
      </div>
    );
  }

I am confused by 2 things, firstly: the use of the braces in the return expression in the map function. <li>{i}</li>This should be straight javascript not jsx right so what are the {} doing and why are the html tags not strings?
Secondly in the return of the component when we output {items}, what is going on here? map() returns an array, does react just loop through the array automatically? Is this a react feature or a js feature.

Thanks for taking the time to read all this! :slight_smile:

1 Like
2

Hi @tonytc.

1 - In your map you aren’t using JS but JSX, so inside JSX you have to use {} for JS.
2 - In items declaration you are returning i for every item in items (that is what you are doing with map), so items is effectively an array of li elements. Technically, {items} displays all li elements.

I hope I made myself clear haha.