How to add, edit, update, delete element from array javascript and reactjs

Question

I have below form:

And below is the table in which I am adding array elements:

I have a form from which I am adding values in an array using below code:

const {updateMode, lead_id, year, probability, plan2, plan3, fee, addcosts} = this.state;
this.setState(state => ({
                lead_plans: [...state.lead_plans, {
                    year: year,
                    probability: probability,
                    plan2: plan2,
                    plan3: plan3,
                    fee: fee,
                    addcosts: addcosts
                }]
            }));

Upon clicking edit button I am using below code:

let added_lead_plan = this.state.lead_plans.find(lead_plan_rec => lead_plan_rec.year === lead_plan.year);

            this.setState({
                plan_id: added_lead_plan.id,
                year: added_lead_plan.year,
                probability: added_lead_plan.probability,
                plan2: added_lead_plan.plan2,
                plan3: added_lead_plan.plan3,
                fee: added_lead_plan.fee,
                addcosts: added_lead_plan.addcosts,
                LeadPlanSaveUpdateDialogOpen: true,
            });

For deleting I am using below code:

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

Now,

Add Works fine. Edit allows me to show the right values in edit form based on finding by date.

Problems:

I cant update the edited element in the array. Instead, it adds that records in the array again when it should update it. But if someone, will edit the date how I can update the record based on date only - So, thats the other problem.

Requirements:

I need a way in which person can easily add as many values from form. Edit them one by one and update the only those in the array which got updated and delete the respective ones which were clicked delete.

Edit

{
                                (updated_lead_plans || existing_lead_plans || lead_plans).map((lead_plan, index) => (
                                    <TableRow key={`mi-${index}`}>
                                        <TableCell align="right" colSpan={2}>
                                            <TableCell align="right">
                                                <IconButton>
                                                    <EditIcon
                                                        onClick={() => this.handleUpdateFields(lead_plan)}/>
                                                </IconButton>
                                            </TableCell>
                                            <TableCell align="right">
                                                <IconButton>
                                                    <DeleteIcon
                                                        onClick={() => this.launchDeleteLeadPlanDialog(lead_plan)}/>
                                                </IconButton>
                                            </TableCell>
                                        </TableCell>
                                        <TableCell align="right">{moment(lead_plan.year).format("DD.MM.YYYY")}</TableCell>
                                        <TableCell align="right">{this.getFormattedNumber(lead_plan.probability)}</TableCell>
                                        <TableCell align="right">{this.getFormattedNumber(lead_plan.plan2)}</TableCell>
                                        <TableCell align="right">{this.getFormattedNumber(lead_plan.plan3)}</TableCell>
                                        <TableCell align="right">{this.getFormattedNumber(lead_plan.fee)}</TableCell>
                                        <TableCell
                                            align="right">{this.getFormattedNumber(lead_plan.addcosts)}</TableCell>
                                    </TableRow>
                                ))
                            }


handleUpdateFields = (lead_plan) => {

            let added_lead_plan = this.state.lead_plans.find(lead_plan_rec => lead_plan_rec.year === lead_plan.year);

            console.log('GGGG', added_lead_plan);

            this.setState({
                plan_id: added_lead_plan.id,
                year: added_lead_plan.year,
                probability: added_lead_plan.probability,
                plan2: added_lead_plan.plan2,
                plan3: added_lead_plan.plan3,
                fee: added_lead_plan.fee,
                addcosts: added_lead_plan.addcosts,
                LeadPlanSaveUpdateDialogOpen: true,
            });

    }

updateLeadPlanDialog = () => {
        const {updateMode, lead_id, plan_id, year, probability, plan2, plan3, fee, addcosts} = this.state;


            this.state.lead_plans.filter(lead_plan_rec => lead_plan_rec.year !== year);

            this.setState(state => ({
                lead_plans: [...state.lead_plans, {
                    year: year,
                    probability: probability,
                    plan2: plan2,
                    plan3: plan3,
                    fee: fee,
                    addcosts: addcosts
                }]
            }));


    }

Taghi Khavari · Accepted Answer · 2020-05-17 11:41:57Z

try this:

{
  (updated_lead_plans || existing_lead_plans || lead_plans).map(
    (lead_plan, index) => (
      <TableRow key={`mi-${index}`}>
        <TableCell align="right" colSpan={2}>
          <TableCell align="right">
            <IconButton>
              <EditIcon onClick={() => this.handleUpdateFields(lead_plan)} />
            </IconButton>
          </TableCell>
          <TableCell align="right">
            <IconButton>
              <DeleteIcon
                onClick={() => this.launchDeleteLeadPlanDialog(lead_plan)}
              />
            </IconButton>
          </TableCell>
        </TableCell>
        <TableCell align="right">
          {moment(lead_plan.year).format("DD.MM.YYYY")}
        </TableCell>
        <TableCell align="right">
          {this.getFormattedNumber(lead_plan.probability)}
        </TableCell>
        <TableCell align="right">
          {this.getFormattedNumber(lead_plan.plan2)}
        </TableCell>
        <TableCell align="right">
          {this.getFormattedNumber(lead_plan.plan3)}
        </TableCell>
        <TableCell align="right">
          {this.getFormattedNumber(lead_plan.fee)}
        </TableCell>
        <TableCell align="right">
          {this.getFormattedNumber(lead_plan.addcosts)}
        </TableCell>
      </TableRow>
    )
  );
};

handleUpdateFields = lead_plan => {
  this.setState(prevState => ({
    lead_plans: prevState.lead_plans.map(item => {
      if(item.plan_id === lead_plan.plan_id){
        return {
          plan_id: added_lead_plan.id,
          year: added_lead_plan.year,
          probability: added_lead_plan.probability,
          plan2: added_lead_plan.plan2,
          plan3: added_lead_plan.plan3,
          fee: added_lead_plan.fee,
          addcosts: added_lead_plan.addcosts,
          LeadPlanSaveUpdateDialogOpen: true
        }
      }else{
        return item
      }
    })
  }));
};

updateLeadPlanDialog = () => {
  const {
    updateMode,
    lead_id,
    plan_id,
    year,
    probability,
    plan2,
    plan3,
    fee,
    addcosts
  } = this.state;

  this.state.lead_plans.filter(lead_plan_rec => lead_plan_rec.year !== year);

  this.setState(state => ({
    lead_plans: [
      ...state.lead_plans,
      {
        year: year,
        probability: probability,
        plan2: plan2,
        plan3: plan3,
        fee: fee,
        addcosts: addcosts
      }
    ]
  }));
};

I've changed your handleUpdateFields method.

but I don't know why you're doing this:

const {
    updateMode,
    lead_id,
    plan_id,
    year,
    probability,
    plan2,
    plan3,
    fee,
    addcosts
  } = this.state;

these values shouldn't be exist on your state because your state looks like this:

{
  lead_plans // which is an array of items 
}

Taghi Khavari · Accepted Answer · 2020-05-17 10:47:54Z

0

in Order to edit correctly you need to do something like this:

use This Code for edit

  this.setState(prevState => ({
    lead_plans: prevState.lead_plans.map(item => {
      if(item.year === lead_plan.year){
        return {
          plan_id: added_lead_plan.id,
          year: added_lead_plan.year,
          probability: added_lead_plan.probability,
          plan2: added_lead_plan.plan2,
          plan3: added_lead_plan.plan3,
          fee: added_lead_plan.fee,
          addcosts: added_lead_plan.addcosts,
          LeadPlanSaveUpdateDialogOpen: true
        }
      }else{
        return item
      }
    })
  }));

and use this code for adding new item

 const {
    updateMode,
    lead_id,
    year,
    probability,
    plan2,
    plan3,
    fee,
    addcosts
  } = this.state;
  this.setState(state => ({
    lead_plans: [
      ...state.lead_plans,
      {
        year: year,
        probability: probability,
        plan2: plan2,
        plan3: plan3,
        fee: fee,
        addcosts: addcosts
      }
    ]
  }));

also keep in mind that year property is not a good indicator to compare, use plan_id instead;

edited May 17, 2020 at 10:47

answered May 17, 2020 at 10:38

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

9 Comments

LearningROR Over a year ago

But when user is inserting the value for the very first time (no db operation) he dont have any plan_id available in the form.

LearningROR Over a year ago

The other problem is that, you post snipt for editing in an array, I need to update that one in the array which was updated from form.

Taghi Khavari Over a year ago

@LearningROR this is only for edit section for your update section use your update code, it was correct

Taghi Khavari Over a year ago

@LearningROR As a general rule , when you click on an edit button you pass the selected Item id (or its data) to your edit function , then you will use this data in your edit form , finally when edit form has been submitted you check your old State and you will update with new result

Taghi Khavari Over a year ago

but In adding new item you take the old items in state and will append the newly submitted form data as a new item to your state

|

Collectives™ on Stack Overflow

How to add, edit, update, delete element from array javascript and reactjs

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related