Question: How to remove dynamic children from Parent State?

I’m using react hook useContext. I have two identical components (siblings), each that use the same context that is a list.

Scenario

1. The first sibling is created, calls useContext, and then pushes something into the list.
2. The second sibling is then created, using the same useContext, and then pushes something into the list.

Issue The second sibling has the current state of list, which has two items, but the first sibling state is not updated with the second item that was pushed in by the second sibling

Expected That each component that is using the same useContext will be updated amongst all components that use the same context.

Is this a bug or am I misusing this? Any help or guidance is appreciated 🙇

[sophiebits]

The issue is that your addChild function is referring to a copy of the removeChild function that is using an older copy of state. So when you click and removeChild runs, the state in that function is actually the state at the time the child was created.

A couple ways to fix this:

1. In most cases you would want to construct the React elements (<DynamicChild />) at render time rather than storing them in state. For example, you can store just {id} in state, then render {state.map(child => <DynamicChild id={child.id} key={child.id} removeChild={removeChild} />)} instead of {state.map(child => child.child)} below.

2. You can rewrite removeChild to use the functional setState form, which always receives the latest state. That would look something like:

const removeChild = id => {
  setState(oldState => {
    return oldState.filter(child => child.id !== id);
  });
};

I verified that both of these would fix your issue.

This is a subtle issue. If you don’t have a full understanding based on what I just wrote, these blog posts may help – they cover some similar questions:

https://overreacted.io/how-are-function-components-different-from-classes/ https://overreacted.io/making-setinterval-declarative-with-react-hooks/

I’m going to close this, as it isn’t a bug in React. Next time, if you need help with your code, please see our community resources at: https://reactjs.org/community/support.html

[IanChok]

Thanks @sophiebits! 🙇