Use Array.map() to Dynamically Render Elements Bug

Use Array.map() to Dynamically Render Elements Bug
0

#1

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/


#2

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(', '); ```

#3

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.


#4

What did you change your split line to?


#5
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.


#6

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.


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

#8

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


#9

Thank you randelldawson the teacher has taught the student.