So I’ve gotten the hang of basic hooks for storing local state to make things happen in the UI, now trying to do something real with our app and I’m feeling very stuck on how to actually make mutations to data that I’ve gotten from a Cell.
I have a TrainingSessionCell with its TrainingSession component. The Cell pulls in a specific training session which comes with a sequence of slots, and slots for this simple case have 3-5 sets, basic strength training setup.
In my UI, I display 1 exercise at a time, with a Done button that saves the weight/reps for that set, and then re-renders the display to show the next set, which may be of a different exercise.
I’ve got everything rendering fine, but where I’m struggling is how to actually update my data that I got from the Cell to say that I have completed that set. I have an onDone callback that is currently getting prop drilled down to the button’s onClick from the TrainingSession. But any attempts to modify my data is met with errors about it being read-only…
I really don’t want to have to have every button click be a network hit when there is no good reason to do so. The intention is that they won’t “submit” the data until they are finished the workout, but I need to store all the completion info temporarily, especially if they changed the generated set information.
Do I need to fetch my data without cells to get a mutable version?
Do I need to clone it somehow?
Am I totally missing the point of something?