Use to Dynamically Render Elements not Passing

There seems to be a bug with this test, almost all solutions on this topic i see here is the same, just like the react documentation page: but why it isn’t working?

Your code so far

const textAreaStyles = {
  width: 235,
  margin: 5

class MyToDoList extends React.Component {
  constructor(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(',');
      toDoList: itemsArray
  handleChange(e) {
  render() {
    const items =,index)=>{
      <li key={index}>{item}</li>
    return (
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>

Your browser information:

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

Link to the challenge:

The problem is your arrow function is not returning the correct value. If you are going to use { and } after the =>, then you must use a return statement. If you delete the { and }, you will be returning the correct value.

1 Like

Thanks! i totally forgot that, getting use to ES6 now.

I notice this challenge is fussy about extra spaces
return <li key={i}> {todo} </li>; :x:

PS. Also it says the key is not required - it will be discussed next challenge.