Confusing syntax in FCC React challenge

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 = => <li>{i}</li>);
    return (
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>

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

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.