score:3

Accepted answer

map function can be applied only on array not on object, as shown in the image tasks is object but tasks.data is array. you should set state as follows:

.then(tasks=>{
          this.setstate({tasks: tasks.data}); // putt array rather than object
  });

this can also be achieve by(if above solution is not applied):

this.state.tasks.data.map();

score:0

try the following:

rendertasks() {
    if (this.state.tasks.hasownproperty('data')) {
        return this.state.tasks.data.map(task => { // here i want to iterate over the state and it fails
            return (
                <li>{task.title}</li>
            );
        })
    } else {
        return (null);
    }
}

when the component renders for the first time, using this.state.tasks.data.map would fail because data is not a key in this.state.tasks as fetch is only triggered after the didmount().

what this does is, if this.state.tasks has data key, then map through that data other wise return null.

score:1

you try to map over the object that holds the data array. you should map over data-array inside the tasks object :)

  rendertasks() {
            const {tasks: {data}} = this.state;
            return ([] || data).map(task => { // here i want to iterate over the state and it fails
                return (
                    <li>{task.title}</li>
                );
            })
        }

Related Query

More Query from same tag