So I don’t see many React questions on here, but after seeing a lot of dated or way too esoteric examples other places, I figured this is worth a shot.
I’ve got a meal tracker app where you can add or delete a meal. I’m using an “uncontrolled” component for the add form, with refs. It works and allows me to save the entry. But now I’d like to be able to edit/update and resave entries.
I’ve looked at a few tutorials for edit forms, but can’t get the radio buttons to work. People seem to like having one of the radio options pre-checked, but I don’t want that in this case…I want what the user initially selected to show.
So I guess my questions are…
-
Should I use controlled or uncontrolled components for these forms? Can you mix and match? I’d rather not alter my code too much…
-
What is the proper way to get the radio button selected and resaved? I saw that you can do event.target.checked (as opposed to event.target.value), but I am not sure how to connect the inputs. The problem with radio buttons is that they are boolean values. They default to false; when you mark one off, it’s true, and the others remain false. The app is connected to a MongoDB database, and in the model for Meal I’ve got healthy: Boolean, semihealthy: Boolean, etc.
Here is my code: Glitch :･ﾟ✧