Use Array.map() to Dynamically Render Elements: the code works but cannot submit

JavaScript
1

Hi,

My code actually works but still I get a message " When the Create List button is clicked, the MyToDoList component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element. // tests completed". When I add list items and click create list, it displays my list.

Here is my code:

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(item => <li>{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>
    );
  }
};
2

The only thing that comes to my mind is that your list items missing key property:

Maybe this is what doesn’t let tests pass?

3

but the description says that is the topic of the next challenge. And I don’t have the ids given in the description…

4

Hello Hessa, I found the problem… and it’s a silly one. The challenge wants your unordered list to look like:

<ul>
<li>thing1</li>
<li>thing2</li>
<li>thing3</li>
</ul>

yours looks like:

<ul>
<li>thing1 </li>
<li>thing2 </li>
<li>thing3 </li>
</ul>

Other than that, your code is correct. Very easy mistake to miss, and I had to google this challenge and find another post on this forum to even catch it.

This is the same as like 90% of my bugs… silly things like spaces or something.

Good luck finishing the React challenges, you’re close!

1 Like
5

oh boy hahah :smiley: again that stupid little thing :smiley: thanks !