Looping of constructor this.state

Question

I would like to declare many variables into the state. How to use dynamic method to do that?

For example:

constructor(props) {
    super(props);

    this.state =
    {
     test1: this.props.navigation.state.params.rowData.test1,
     test2: this.props.navigation.state.params.rowData.test2,
      .........
     test50: this.props.navigation.state.params.rowData.test50
    }
}

Out of curiosity, why are you attempting to do this and what lead your data to be structured in that manner? — Michael Cheng, Sep 19 '19 at 14:16
I would like to create an edit information page and create many inputtext with dynamic method, when the input changed, it needs to update the state variable — Howard Lam, Sep 20 '19 at 01:17

Robert Hovhannisyan · Answer 1 · 2019-09-19T14:53:28.400

3

You can use for loop for that. For example:

for(let i = 0; i < 50; i++){
  this.setState({ [i]: this.props.navigation.state.params.rowData.[i] })
}

If you want to do it exactly how in your example, you must push all your tests in the object, and in the setState just set this object.

Something like this:

var obj = {};
for(let i = 0; i < 50; i++){
  obj[test+i] = test+i;
}
this.setState({test: [ ...this.state.test, obj]});

edited Sep 19 '19 at 14:53

answered Sep 19 '19 at 13:16

Robert Hovhannisyan

2,938
6
21
43

for(let i = 0; i < 50; i++){ this.setState({ test[i]: this.props.navigation.state.params.rowData.[i] }) } – Howard Lam Sep 19 '19 at 14:05
that's an example, in this case, create an empty array in your state and name it `test`. See if it works. – Robert Hovhannisyan Sep 20 '19 at 13:53

score 0 · Answer 2 · answered Sep 19 '19 at 14:52

0

Why not just spread them in?

this.state = { ...this.props.navigation.state.params.rowData }

answered Sep 19 '19 at 14:52

Dave Newton

158,873
26
254
302

what is the meaning of ... ? – Howard Lam Sep 20 '19 at 13:47
1

@HowardLam it's a "Object Spread" operator. The ES6 syntax for `Object.assign()` . For more information you can read this article: https://thecodebarbarian.com/object-assign-vs-object-spread.html – Robert Hovhannisyan Sep 20 '19 at 14:07
Thanks. it works now. but there is one more questions.....how can I use looping for set state petty+i?? any syntax i can use? this.setState({petty+i:text})} value={eval("this.state.petty"+i)} /> – Howard Lam Sep 20 '19 at 15:14
1

@HowardLam You keep using eval. As I said in a previous comment this is completely unnecessary by using bracket Boston for your property access. You may want to take a step back--there's a few things going here that make me think some tutorials on basic JS, React, and data structures will save you significant time and headaches. – Dave Newton Sep 20 '19 at 15:44

Looping of constructor this.state

2 Answers2