Fix fcc react bug in todo list

JavaScript
1

from this challenge:

React: Use Array.map() to Dynamically Render Elements

This question is not about passing this challenge, but what I want to know is what I can do so that it will not even print out that little bullet point if the user submits an empty string,
I tried to put the following right BEFORE the end of the last div tag inside the return(), I expected it to work:

{this.state.userInput==''?'':<ul>{items}</ul> }

and this seems to work the first time, however you will see when you type in something its still allows that bullet to print out.

2

@kravmaguy There are a couple ways, but one way would be to modify the handleSubmit method as follows:

  handleSubmit() {
    const itemsArray = this.state.userInput
       ? this.state.userInput.split(',')
       : [];
    this.setState({
      toDoList: itemsArray
    });
  }
3

Your solution works, but I dont understand it.

4

re the following:

  handleSubmit() {
    const itemsArray = this.state.userInput
       ? this.state.userInput.split(',')
       : [];
    this.setState({
      toDoList: itemsArray
    });
  }

first statement in ternary checks if this.state.userinput exists (assuming the user types empty string it will return false skip the next statement and proceed to the third in the ternary)… if the user actually put in something (including &nbsp space it will still pass it is a value that takes memory ascii code), then we return this.state.userinput reset to an array using split (which we will later use to map over). and if its this.state.userinput is empty we just reset it to an empty array.
finally reset state using setstate method asssign toDoList key value of itemsArray from what you just defined above in your ternary.

there is the remaining bug of &nbsp being set inside a list item, we fix this by assigning itemsArray:

this.state.userInput.trim()

Regarding the below logic inside of the return statement:

{this.state.userInput==''?'':<ul>{items}</ul> }

Is incorrect, it works the first time but upon submitting an empty todo the first time and starting to type, it actually applies and the last statement in the ternary what you would render look something this <ul>{items}</ul> where items= '&nbsp ’

Is the above correct?