create react state name with variable reference?

Question

i want to create state like this:

componentWillReceiveProps(nextProps) {
    nextProps.columns.forEach((c) => {
      const name = nextProps.columns[nextProps.columns.indexOf(c)];
      this.setState({ `${name}`: (this.props.activeHeaders.indexOf(c) > -1) });
      console.log(`${name}`);
    });
  }

I am mapping on my array columns, so each item on the array, i want to set state on them as key, is there a possibe way?

score 2 · Answer 1 · answered Jan 17 '18 at 09:37

2

componentWillReceiveProps(nextProps) {
    nextProps.columns.forEach((c) => {
      const name = nextProps.columns[nextProps.columns.indexOf(c)];
      this.setState({ [name]: (this.props.activeHeaders.indexOf(c) > -1) });
      console.log(`${name}`);
    });
  }

This should do the job

answered Jan 17 '18 at 09:37

simbathesailor

3,681
2
19
30

hmm, is that an array? [name]? – gpbaculio Jan 17 '18 at 09:38
1

https://stackoverflow.com/questions/19837916/creating-object-with-dynamic-keys read this this is how you can add dynamic keys to object in es6 – simbathesailor Jan 17 '18 at 09:38

Mayank Shukla · Accepted Answer · 2018-01-17T09:48:37.067

2

Is there a possible way?

Yes, but the way you are trying is not correct, instead of calling setState inside loop, first prepare an object with all the key-value, then pass that object to setState.

Like this:

componentWillReceiveProps(nextProps) {
    let obj = {};

    nextProps.columns.forEach((c, i) => {
        const name = nextProps.columns[nextProps.columns.indexOf(c)];
        obj[name] = this.props.activeHeaders.indexOf(c) > -1;
    });

    this.setState(obj);
}

Didn't get the meaning of this line:

const name = nextProps.columns[nextProps.columns.indexOf(c)];

edited Jan 17 '18 at 09:48

answered Jan 17 '18 at 09:39

Mayank Shukla

100,735
18
158
142

Thanks a lot. it worked. this is a good way to achieve what i wanted to do – gpbaculio Jan 17 '18 at 09:40

create react state name with variable reference?

2 Answers2