How to update and delete array of elements from child component and pass that to parent component in ReactJs

Question

EDIT: I have created a codesandbox. Here is the link:

https://codesandbox.io/s/musing-rgb-ikq33?from-embed

I have a scenario in which I need to update the array in parent component from child component.

E.g, I am adding array contents from form, so if I have 7 items in child component ( that I am adding from child and passing them in parent component one by one from form ).

How I can edit/update single array row without mutating my original array?

The adding is working fine, I need to work on edit single item and update that in parent component ( that has all array elements from child ) but it seems like without mutation it cant be done.

Parent component:

handlePlansClick = (planData) => {
        this.setState(state => ({
            lead_plans: [...state.lead_plans, planData]
        }));
    }

Child component declaration in Parent component:

 <LeadPlans handlePlansClick={this.handlePlansClick} existing_lead_plans={this.state.lead_plans}
                                           must_contain_lead_plan={this.state.must_contain_lead_plan} lead_id={lead_id} updateMode={updateMode}/>

For adding to parent from child form I am using:

this.props.handlePlansClick({
                            id: Date.now(),
                            year: year,
                            probability: probability,
                            plan2: plan2,
                            plan3: plan3,
                            fee: fee,
                            addcosts: addcosts
                        }
                    );

For updating:

const {lead_id, lead_plans, year, probability, plan2, plan3, fee} = this.state;
            const new_lead = {
                id: lead_id,
                year,
                probability,
                plan2,
                plan3,
                fee,
            };
            const updated_lead_plans = lead_plans.map((lead) => lead.id === lead_id ? new_lead : lead);
            this.setState({
                lead_plans: updated_lead_plans,
                year: '',
                probability: '',
                plan2: '',
                plan3: '',
                fee: '',
                addcosts: '',
                newFieldsEditMode: false,
                LeadPlanSaveUpdateDialogOpen: false
            });

Now, its working as expected but problem is that its not updating my parent array in which I need to have updated array item. It updating all contents in child component only which I dont want to.

This below code needs fix as I want to remove existing item and update that updated one in parent array again that contains all array of elements:

const updated_lead_plans = lead_plans.map((lead) => lead.id === lead_id ? new_lead : lead);
            this.setState({
                lead_plans: updated_lead_plans,
                year: '',
                probability: '',
                plan2: '',
                plan3: '',
                fee: '',
                addcosts: '',
                newFieldsEditMode: false,
                LeadPlanSaveUpdateDialogOpen: false
            });

Similarly, for deletion I am using:

this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));

But it only working in child component as I want to remove item and update my parent array with that removed item as well.

How I can get that edit/update/delete from child and pass the updated array to parent again?

Answer 1

In React the data flow should always be from the parent component to the child component and not vice versa.You can use a 'Global State management tool' like Redux to pass data from one component to any other component(s) and update the root state object. Also Redux has a lot of boilerplate while implementing it so if the app is simple you can use MobX.