CODEWITHSUNDEEP
reactjsreact-hooksreact-context
Chris Jeong
Chris Jeong

Reputation: 175

React get data from children context inside the parent component

I'm trying to set up a form with many rows of data, with each individual items. When I click a button, I want to get all of the data from each children, and submit the form. I'm using context to achieve this.

<Parent.Provider value={parentContext}>
  <Child.Provider value={childContext1} />
  <Child.Provider value={childContext2} />
  <Child.Provider value={childContext3} />
  <ButtonGoup />
</Parent.Provider>

I have set up the context like so

ParentContextType: 
  childrenItems: Array<ChildContextType>
  onChildAdded: (child) => {setChildrenItems(child => [...childrenItems, child])}

ChildContextType:
  description: string
  setDescription: ()=>{}
  image: Image
  setImage: ()=>{}

I intially wanted to set up all of the child contexts in the Parent component like so:

    onFilesSelected = useCallback((files) => {
      files.forEach(file => {
        const [description, setDescription] = useState('');
        const [image, setImage] = useState();
        const childContext = useMemo(() => {
                                       description,
                                       setDescription,
                                       image,
                                       setImage,
                                     }, [description, setDescription, image, setImage]);
        onChildAdded(childContext);
  
      }
    })

but I can't do this because I can't use hook "useState" inside a callback.

so what I did instead is creating a child context inside the child component, and appending it to the parent array:

// inside the child component
  const parentContext = useContext(ParentContext);
  const onChildAdded = parentContext.onChildAdded;
  
  const [description, setDescription] = useState('');
  const [image, setImage] = useState();
  const childContext = useMemo(() => {
                                 description,
                                 setDescription,
                                 image,
                                 setImage,
                               }, [description, setDescription, image, setImage]);
  onChildAdded(childContext);

this works, however, say the description value of ChildComponent1 gets updated, then it would update the childContext, but I realized it will not update the value inside the parentContext.childrenItems[0].description.

Now, when I try to fetch the value inside the button group, which is in under the ParentContext, but not the ChildContext, the description value does not get updated.

// inside ButtonGroup Component
 const parentContext = useContext(ParentContext);
 const child1DescriptionValue = parentContext.childrenItems[0].description;
 // child1DescriptionValue  will always be '' since it won't get updated in the parent context.

How should I handle this case, where Parent Context will have array of children contexts, and I want the change in children context to update the parent context as well. Thanks!

Upvotes: -1

Views: 44

Answers (1)

Bivishan Sapkota
Bivishan Sapkota

Reputation: 577

main issues is with your childContext using useMemo, which is not synchronizing at the time so Use refs in your parent context array and also Create a registration process where children register with the parent.

Upvotes: 0

Related Questions