As part of the portfolio project as part of the frontend engineering careerpath, I’m attempting to create a editable table to be used for scoring. I have a static version of the app working. However, when you attempt to change a number input I cannot get the app to:
- Update the value which comes from an array of objects.
- Update the value show in the input that was changed.
Now I’m pretty sure that I need to create an onchange function but nothing I’ve tried works! Any help would be really appreciated!
You can see the project:
The player data is stored in a file - you will need to have it in state to be able to update it with an onChange function.
Hi jameskeezer,
Thanks for replying. I do understand that I need to managed the state on update using an onChange function but I’m not sure how to do this so that onChanges update individual name:key values within the correct object in the array.
Maybe an easier example would be this one: https://codesandbox.io/s/fragrant-rgb-6kvpcd?file=/src/App.js
In this smaller app I’m using to try and figure out the solution you can see that I’m trying two different methods:
METHOD 1: USING A STATE CHANGE FOR JUST THE SANDY OBJECT
This works just fine, but if I was going to have 10 people, then I’d need to
- create 10 individual objects
- create 10 setStates
- create 10 handleChanges
THis just seems very messy.
METHOD 2: USING A STATE CHANGE FOR EVERYTHING USING THE “people” NESTED OBJECT
I cannot get this to work, but what I want to do is:
- use the one nest object “people” above
- Have one setState that manages the state of the entire object.
- Have one handleChange that changes [name]:key value for just that one nest object. This way each input could use the same change handler function but it would only update the specific name:key value in the correct nested object.