Hey guys, I’m currently on a problem that is bugging the absolute hell out of me. I can’t really share the code, but I can speak of the problem on a higher level in hopes one of you will be able to have me see this in another way.
First things first, we are using no state management.
We have a parent Products component that maps the Product components. Some of the products have Items (if they contain them) and pass as props down into each component. These Items are then mapped within the Product component to display. Each Item has a dropdown where you can select a user. The API is called within the Product component to retrieve the user’s information. Depending on a boolean flag on the user object from the API response, we toggle whether true or false on the Item that is displayed within the Product.
For example: a Product can have 2, 3, 10, etc. items, respectively with 2, 3, 10, etc. users.
After assigning all users to the product’s items and refreshing the page, the Items props from the Products (parent component) is properly updated and everything is wonderful. However, we all know I can’t rely on refreshing the page which is where my problem is.
How can I keep track of each assigned user’s flag? I would assume keeping track of an array of true/false for each number of user in the state, then populate that within the Items props? I know I need a useEffect() in the parent component most likely? I wouldn’t think I need a piece of state in the product because it has multiple Items. I’m not sure anymore and have really been spinning my wheels. Thanks.