how to access a property inside an another property in the same class

Question

I'm a react noob player, I was just hanging around my code to add some more options to it, now I want to do something that needs accessing a property in the state object from another property inside the same state object, this is my code:

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: [...this.state.persons]
    }
}

Here i need to copy the persons property in the defaultPersons property, is it possible ? how can i do that ?

sorry about any confusion, and

Thanks Everyone :)

Answer 1

You can define persons outside of state, and spread the array into the needed places. I will however say that you should really think about why your are doing this. Is there a way you can dry out your code so you don't need two identical objects in state?

constructor(props) {
    super(props);
    const persons = [{key:'value'}, {key:'value'}];
    this.state = {
       persons: [...persons],
       defaultPersons: [...persons],
    }
}

Answer 2

There is simple way to achieve what do you need: initialize state in constructor

class App extends Component {
    constructor() {
         this.state = {
             defaultPersons : [
               {name: "parsa", age: 45},
               {name: "cena", age: 98},
               {name: "jamil", age: 23}
             ]
         };
         this.state.persons = [...this.state.defaultPersons];
     }
}

But there are some nuances.

1. State should contain only dynamic information that affects how component looks(since any change in .state with setState trigger render() ). Do you really need defaultPersons to be part of .state ? I believe it should be better to set up it directly into this.defaultPersons or even const outside this .

2. Operation you asked for(and my variant above) makes shallow copy. So any mutation of defaultPersons[1] may change persons[1] item if reference has not been changed yet. And although mutating data in state is bad idea by itself I wanted to highlight this thing.

Answer 3

This is not possible in one step because there's no this.state.persons to refer until it was defined, this is chicken-egg situation. This is not specific to class properties, the same problem would appear in other situations:

const foo = {
  bar: 1,
  baz: foo.bar // there's no foo at this moment.
};

The problem results from the fact that defaultPersons shouldn't be a part of the state. It seems to be a constant that is not changed. In this case defaultPersons can be a separate property:

class App extends Component {
    static defaultPersons = [
      {name: "parsa", age: 45},
      {name: "cena", age: 98},
      {name: "jamil", age: 23}
    ];

    state = {
        persons : [...App.defaultPersons]
    }

    revertToDefaultPersons() {
        this.setState(state => ({
            ...state,
            persons : [...App.defaultPersons]
        }));
    }
}

Or just a constant that is defined outside the class. This makes things simpler but may result in lesser testability.

Answer 4

you could also use componentDidMount to update the original state

class App extends Component {
    state = {
        persons : [
          {name: "parsa", age: 45},
          {name: "cena", age: 98},
          {name: "jamil", age: 23}
        ],
    defaultPersons: []
    }

     componentDidMount () {
     this.setState({
     defaultPersons: [...this.state.persons]
    })
  }
}