Use Array.map() to Dynamically Render Elements Bug

Tell us what’s happening:
My list prints to the screen and works. Looks like a bug stopping me from passing. How can I get it to let me pass. I tried with and without a index key.Thank you.

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 = {
      toDoList: [],
      userInput : ""
    }
    // 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((item, index) =>  <li key={index}>{item}</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>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36.

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

No bug, your solution does not create an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element. Instead, your solution creates a single list item element with the same comma separated string.

If the following was entered into the textarea:

hello,goodbye,bon soir

your solution displays:

My "To Do" List

  • hello,goodbye,bon soir

and it should display:

My "To Do" List

  • hello
  • goodbye
  • bon soir

The problem is in the following line. Your split is not correct. ``` const itemsArray = this.state.userInput.split(', '); ```

I’m showing a list of items like in your example and I’m changing the split and still getting a list but still not passing. Thank you for look at it randelldawson.

What did you change your split line to?

const itemsArray = this.state.userInput.split(", ");

The instructions say type a word with comma separated. That is what I’m doing and it is rendering correctly maybe I need to try a different browser I’m using Chrome.

You have the exact same split separator value as you did before. You did not change anything. Your split separator is wrong. Take out the space after the comma.

const itemsArray = this.state.userInput.split(",");

When I use the line you just posted with your original code you posted above, it passes all the tests.

Thank you randelldawson the teacher has taught the student.