React: Use Array.map() to Dynamically Render Elements Help

JavaScript
1

Tell us what’s happening:

It seems my code does what the task requires, maybe I am missing something obvious, if so please let me know and I will keep checking for it

Your code so far


const textAreaStyles = {
width: 235,
margin: 5
};

class MyToDoList extends React.Component {
constructor(props) {
  super(props);
  // change code below this line
this.state = {
userInput: "",
toDoList: []
}
  // change code above this line
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleChange = this.handleChange.bind(this);
}
handleSubmit() {
  const itemsArray = this.state.userInput.split(',');
  this.setState({
    toDoList: itemsArray
  });
}
handleChange(e) {
  this.setState({
    userInput: e.target.value
  });
}


render() {
  const items = this.state.toDoList.map(x => <li key={Math.random()}> {x}</li>)

  return (
    <div>
      <textarea
        onChange={this.handleChange}
        value={this.state.userInput}
        style={textAreaStyles}
        placeholder="eat, code, sleep, repeat" /><br />
      <button onClick={this.handleSubmit}>Create List</button>
      <h1>My "To Do" List:</h1>
      <ul>
        {items}
      </ul>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Use Array.map() to Dynamically Render Elements

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/use-array.map-to-dynamically-render-elements

2

i found the problem


<li key={Math.random()}> {x}</li>)

there was a space between the arrow