Common issue with synchronizing state in React

I often see new React developers struggle with this issue: "How do I synchronize two states when one depends on the other?"
In this video we walk through a code example, the way many new developers approach it, and finally end up with a working and clean solution.
The code progression can be seen in these three codesandboxes:
codesandbox.io...
codesandbox.io...
codesandbox.io...
Follow me! / brookslybrand

[@BoNez37]

dude thank you so much for this tutorial! I couldn't get my head around how this was supposed to work but the way you explained it made me get it instantly!

[@kosm8745]

Thanks , nice explanation!!

[@neelabhdutta6691]

You may use e.target.value directly, anything that is not reactive, i.e input that changes only by user activity, should not be a state at all.. still if you need it... rather use a ref in that case

[@ReactTipsWithBrooks]

Yep, in a lot of situations you're absolutely right! I was just trying to demonstrate a pattern a lot of developers do (trying to synchronize two states), and a method I prefer (deriving a value from the state)