-1

im new to react and I came into a problem I cannot seem to fix, Im trying to reacreate the iPhones notes app and theres this issue that when I first hit + to add a new note it doesnt get added into the state array, whats weird is that it works normally the second time I click it and so on

screenshot for the array problem

My 2nd issue is that theres this "activeObj" state variable which stores the clicked notes object but also normally works on the 3rd try, the first and second clicks look like this (check screenshots)

screenshot for the activeObj problem

I tried changing the syntax and the structure of the functions but my skills are still limited since its my first week of doing react

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
Mark Vitko
  • 9
  • 3
  • Don't post images of code. Take the time to type/paste the relevant details as text to the question body. When appropriate provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) or link to a working sandbox. – pilchard Feb 07 '23 at 21:38
  • Also a long standing duplicate [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) – pilchard Feb 07 '23 at 21:39

1 Answers1

0

When you call the setState method, it updates the state behind the scenes, and then schedules a re-render of your component with the state variable (e.g. arrayOfNotes) set to the new value. Because you've got your console.log inside the function that's calling the setState method, you're logging the old value, because it hasn't done the re-render yet.

Next render cycle it'll be fine, in fact you could move your console.log into the body of the component and see it'll behave as you're expecting.

When you're updating a state and the new state value depends on the previous one, I'd also recommend using the function version of setState precisely for this reason, e.g.

 setArrayOfNotes((prev) => [newNoteObject, ...prev])

This is because prev will take into account other sets done this render cycle, but the way you're doing it currently won't. Doing it this way will certainly save you from other bugs later on.

The cycle order also is what's causing your second issue. You're setting the active note, but because the set won't apply until the next re-render, activeNote will still be the old value in the line below, when you're expecting it to already have been updated. You can just pass id in there instead in this case.

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
  • This is a duplicate on both counts. Flag to close. [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) and [useState hook, setState function. Accessing previous state value](https://stackoverflow.com/questions/56404819/usestate-hook-setstate-function-accessing-previous-state-value) – pilchard Feb 07 '23 at 21:41
  • I think it's an argument in philosophy really @pilchard, I definitely agree it's a duplicate, but I wonder if OP would learn as much from just reading the dup, vs a more tailored answer. Because, if we're honest, there aren't really that many novel questions these days, and I quite prefer writing answers than the more administrative tasks of dup hunting and flagging, etc, if the question shows at least some effort has been made. I guess it would be an interesting meta discussion, although I'm sure many people have already had it. – Toastrackenigma Feb 07 '23 at 21:46
  • It's not an argument of philosophy it is the recommended practice to flag exact duplicates as such. [Should I flag a duplicate question, even if the flag may not be helpful for a beginner?](https://meta.stackoverflow.com/questions/400815/should-i-flag-a-duplicate-question-even-if-the-flag-may-not-be-helpful-for-a-be). This serves to make the entire site more cross-referenced and often leads to more complete, developed answers. – pilchard Feb 07 '23 at 21:47
  • Technically the question should be closed "Needs more focus" because it asks two questions in one. But that would be even less helpful – Toastrackenigma Feb 07 '23 at 21:48
  • I voted 'needs clarity' because I wasn't willing to look at images of code. But I then took the time to explain that posting images of code is not helpful *and* linked to the relevant duplicates. You can answer and flag, just fyi. (You'll note the duplicate has 25 answers with far more information, explanation, links and examples than your brief description of what's happening.) – pilchard Feb 07 '23 at 21:50