How to change state inside nested object in React

Question

Hi i have parrent and child component. Parrent component is receiving data from server. This data are saved in state.data. Now, when i do action in child component, it should be call method from parrent controller. This is working now. Problem is inside this method which i am calling. I am receiving id as parameter. This data in parrent have list of items (packages) and every item has id. I need to update only one of them by id (or other way i don't know right way). Please how i can do it? I need to update isOpen state only that one item i open by clicking on button in child component My method (but i am not sure if i started to do this right way), i stucked on this problem for while:

changeIsOpenState(typeOfPart: Number, id: Number) {
        console.log(this.state.data.packages);
        const selectedObject = this.state.data.packages.filter((obj) => {
            const val= (obj.id === id) ? obj : false;
            return val;
        });
    }

Array of data i want update (isOpen property).

Milad ranjbar · Accepted Answer · 2020-04-30 20:59:57Z

1

what about immutably? I think u can use dot-prop-immutable package in this way:

const state = {
  packages: [
    { isOpen: false, id: 1 },
    { isOpen: false, id: 2 },
    { isOpen: false, id: 3 }
  ]
};
const index = state.packages.findIndex(obj => obj.id === 3);
const newState = dotProp.set(state, `packages[${index}].isOpen`, true);

answered Apr 30, 2020 at 20:59

Milad ranjbar

6191 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin Grisel · Accepted Answer · 2020-04-30 21:12:51Z

1

you could do it the ol' way :

changeIsOpenState(typeOfPart: Number, id: Number) {
  // Copy the packages so you won't mumtate your state directly
  const packages = Object.assign({}, ...this.StaticRange.data.packages);

  // Get the package to edit and its index in the packages object
  let packageIndex;
  let packageToEdit;

  for(let i = 0; i <= packages.length; i++){
    if(packages[i].id === id){
      packageIndex = i;
      packageToEdit = packages[i];
      packageToEdit.isOpen = true
    }
  }
  packages[packageIndex] = packageToEdit;
  setState({...this.state, data:{...this.state.data, packages}});
}

answered Apr 30, 2020 at 21:12

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

Comments

Young L. · Accepted Answer · 2020-04-30 21:06:34Z

0

I did it like this: 1.I copy current data to another variable 2.Filter data by id 3.Save array key of item with same id 4. Change cloned value with negation 5. save new data to state

 changeIsOpenState(typeOfPart: Number, id: Number) {
        const subjectDataCopy = cloneDeep(this.state.data);
        const keys = [];
        subjectDataCopy.packages.filter((obj, key) => {
            if (obj.id === id) {
                keys.push(key);
            }
        });
        subjectDataCopy.packages[keys[0]].isOpen = !subjectDataCopy.packages[keys[0]].isOpen;
        this.setState({data: subjectDataCopy});
    }

If there is better option to do this please let me know :)

answered Apr 30, 2020 at 21:06

Young L.

1,0424 gold badges19 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to change state inside nested object in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related