JSON.stringify returning different values to simple console log

Question

I'm trying to do a really basic todo app in React using local storage, and am using an array of objects for my data. This seems to work fine for loading information up, but no matter what I do I can't seem to update local storage.

I started backtracking and found that after my handleSave function, if I console log this.state.todoData I get the correct, updated values. If, immediately after that console log, I try logging JSON.stringify(this.state.todoData) it brings me back the old data in stringified form, rather than the updated data. This is even before I do anything with local storage.

I can't for the life of me understand why console logging this.state.todoData vs JSON.stringify(this.state.todoData) would bring me a different data set.

Here is my handleSave function:

handleSave (idNum, title, due, description) {
  this.setState(prevState => ({
    todoData: prevState.todoData.map(obj =>
      obj.id === idNum
        ? Object.assign(obj, {
            inEditMode: false,
            title: title,
            due: due,
            description: description
          })
        : obj
    )
  }))
  console.log(this.state.todoData)
  console.log(JSON.stringify(this.state.todoData))
}

Answer 1

the this.state.todoData is object. Which is passed by reference, console.log shows that. If the referenced object changes then console logged object also changes.

But, On the other hand, when u JSON.stringify it, that becomes string which is passed by value. So, it doesn't change,

    const Obj = {
      a: 1,
      b: 58,
    };

    console.log(Obj);

    Obj.a = 484151
    console.log(Obj);

Both of them logs the same thing

See console.log() shows the changed value of a variable before the value actually changes

Answer 2

Since the state is not immediately updated you should instead update/log the values after it successfully completed, for instance in the callback of the setState function

this.setState(prevState => ({
  todoData: prevState.todoData.map(obj =>
    obj.id === idNum ?
    Object.assign(obj, {
      inEditMode: false,
      title: title,
      due: due,
      description: description
    }) :
    obj
  )
}), () => {
  console.log(this.state.todoData)
  console.log(JSON.stringify(this.state.todoData))
})

Answer 3

(Posting solution on behalf of the question author to move it to the answer space).

It's solved! I had to create a new callback function and pass it in as a parameter to setState. I didn't realise that setState doesn't update immediately, and therefore it always felt 'one step behind'.

Updated code:

    this.setState(
      prevState => ({
        todoData: prevState.todoData.map(obj =>
          obj.id === idNum
            ? Object.assign(obj, {
                inEditMode: false,
                title: title,
                due: due,
                description: description
              })
            : obj
        )
      }),
      this.updateLocalStorage
    )
  }

and the updateLocalStorage function:

  updateLocalStorage () {
    const newState = JSON.stringify(this.state.todoData)
    localStorage.setItem('todoDataString', newState)
  }