JavaScript by Example

Managing the state for the tasks

The second state that we need to maintain in our app is the tasks array. Currently, we have an unordered list of sample tasks. Add those tasks as strings inside the tasks array. Your state object inside the constructor should now look as follows:

this.state = {            tasks: [          'Do Gardening',            'Return books to library',            'Go to the Dentist',        ],              inputValue: "",        };

Now, let's populate the tasks from the state. In your render method, inside the <ul> element, remove all the <li> elements and replace them with the following:

<ul className="list-group">              {                this.state.tasks.map((task, index) => <li key={index}>{ task }</li>)              }          </ul>

The curly braces {} in JSX only accept expressions that return a direct value just ...