Props passed to components in an array are never updated about react

[Ykk2]

I believe this is happening because when you store an entire component inside the state, it is stored with the snapshot of the props at that moment.

Also, in general I think it is discouraged to store components inside the state. Even if the component will not be updated. From personal experience I found this leads to unexpected behavior with bugs that are hard to track down. Instead now I set the state with a unique identifier (str, or int), which will then render the component I want based on the value of the state.

Could you share with me what your intentions were with this approach? I think it can help me understand the situation better.

[imageck]

I believe this is happening because when you store an entire component inside the state, it is stored with the snapshot of the props at that moment.

Right, I suspected the same.

Could you share with me what your intentions were with this approach? I think it can help me understand the situation better.

The idea is to limit the number of times any particular option can be selected. That is, an option must not be displayed (and consequently selected) if it's already been selected, say, three times. If the props were live, the last part of the code (from line 90) would be executed as intended.

[Ykk2]

Gotcha, would this solution work for you?

https://stackblitz.com/edit/nextjs-hxcvxr?file=pages%2Findex.js

Instead of storing the component, we are just storing objects that will be passed down as props.
Then we create a local state within each ItemField component and listen in on types to update the component.

[imageck]

Impressive!

I think I have taken a similar approach the second or the third version but it led to duplicate entries and a broken state. Possibly due to updating types improperly.

One thing. I'm not quite sure why there is a need for a separate state variable in options, as I believe prop updates already cause a re-render. Could you please shed some light on why duplication of state is okay here? The comment is a bit confusing, at least to me. Removing this new local state doesn't seem to affect the component in any negative way.

Anyway, you've just put an end to a lot of my frustrations. Thank you for taking the time to help me overcome this roadblock!

P.S. I'll apply your changes to the real component tomorrow.

[Ykk2]

Glad it's working! I chose to duplicate state here and keep it updated to ensure each component has an accurate reference to the current state of types. However, I do agree that this could be an unnecessary precaution.

[gaearon]

You're really not supposed to be storing JSX in state. Store the data itself. Then update the data when needed.