0

I am learning about Hooks, React Context, and other things, but I feel that I don't understand how DevTools work. My axios call returns some data which updates the state. I can see the state change and my console.log displays the information.

This is state under Hooks:

enter image description here

This is what the console.log(todos) spits out: enter image description here

This is how console log looks expanded: enter image description here enter image description here enter image description here

I don't know if the todos have the form of {[{_id, title, userId}]} or [{_id, title, userId}] under DevTools.

I think it is the latter and tried to access via console.log(todos[0]), console.log(todos[0]['title']), etc but those return undefined yet console.log(todos) doesn't. Is there a reason why this is so?

Reggie
  • 63
  • 2
  • 9

1 Answers1

1

If console.log(todos) logs this object {todos:[...]} it means that the todos object contains a todos property that contains the array. That is probably confusing you since you need to select todos once again:

console.log(todos.todos) (The full selector will then be console.log(todos.todos[0]['title']) )

My guess is that you saved the complete Redux state into a todos variable in your code via var todos = state;.

I suggest you save the state in another variable name instead to avoid the confusion:

var reduxState = state;

...or save only the todos state:

var reduxTodosState = state.todos;

Wezelkrozum
  • 831
  • 5
  • 15
  • I was playing with the code earlier and noticed that when I used typeof; it threw back an object. You are correct, I returned the response.data as todos and confused myself later on as I work on and off on this code. I tried todos.todos[0]['title'] but the page says **TypeError: Cannot read property '0' of undefined**. – Reggie Aug 19 '20 at 01:24