#A bit of help managing state on mapped objects

8 messages · Page 1 of 1 (latest)

scarlet totem
#

Hi all! I want to apologize in advance as typically when I ask questions on here, or in any community, I'll include detailed screenshots and code examples, this time has to be an exception unfortunately. The app that I'm working on has too many moving pieces, it would take a small book to explain everything, but I have narrowed down the issue and just require a bit of help. Bear with me, I'll do my best to explain what is happening.

  1. The functionality in mind is that a user will be able to pick how much of an ingredient they desire from a list of ingredients. The options are "None", "Light", "Normal", "Extra". The name of the ingredient is above a button with a "+" selector to increase how much, and a "-" selector. The way I accomplish this functionality is that I have a state that sits at the top of the tree. For each ingredient I receive, I map out an ingredient selector component that receives props.

  2. The way I have it right now is that the ingredient selected is a piece of state passed through props. Here is the kicker -- it actually works, except for one little thing -- when you flip one of them, it flips all of them. The problem is likely that I'm passing the state down through props. When the state changes, it affects all of them. It seems as if there needs to be a way to check and only flip that buttons state

  3. Here is the thing -- I've tried a few different methods to enact this change. I've tried comparing the ID of the clicked button (by using the event object) to the ID of the ingredient object. I've tried using a .map like in the squares example from the intro react course. I just feel like I am missing the mark here somewhere. I'm missing something.

  4. The organization of my files look a little something like this
    Index -(props)-> Modal -(props)-> Button -(ingredients.map to generate a button for each ingredient)
    Index is where all of the state lives

  5. I could use derived state to solve this issue. Each ingredient could manage its own state. That seems to be worst practice and I'd like to stick away from derived state, although the call of the void has been getting louder and louder.

With all of those said, here is my overarching question. When you are mapping through and generating components based on your map, how can each one of them have their own version of state that isnt derived state? How can I only flip the state for the button that is clicked.

Thanks a bunch. I really appreciate the help from this community. Cheers!

storm swift
scarlet totem
#

Looking now

#

Yeah, pretty much. My implementations of something similar were unsuccessful.

#

The one thing I wasn't doing is actually making updates to an object, I was making changes to a value.

In essence, the data structure looked like this...

//Ingredient array, the one being mapped over
[{
name: 'Tomato',
id: 1
},
{
name: 'Lettuce',
id: 2
}
}]

// Then, somewhere else in the file
const ingredientChoices = ["None","Light","Normal","Extra"]

It seems as if every successful implementation of this is pushing data as a new object, which makes a lot of sense. The boxes example in react starter course uses this approach as well. Is there any way I can do it by having the state be a value instead? Since it isn't a count, it is a static group of options that applies to every ingredient no matter what, it almost feels wrong adding it to the ingredient object. In other words, it isn't data about the ingredient, its an option that each ingredient gets.

storm swift
#

I think it's almost necessary to store the ingredientChoice value in the Ingredient array. Or a reference value. One moment and I can demonstrate

scarlet totem
#

Wow! Yea this seems to be the solution. Thanks so much 🙂