Use to Dynamically Render Elements: the code works but cannot submit


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) {
    // 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 = => <li>{item} </li>);
    return (
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>

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?

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

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


yours looks like:

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

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

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