Define array of object as state variables on ECMA6/react

Question

I tried to make state object array as below

class DescriptionComponent extends React.Component {


    constructor(props) {
        super(props);
        var initial_object={};
        initial_object['type']={}
        for(var i=0;i<20;i++){
          if(i===0){
            initial_object['type'][i]="Building";
          }
          else if(i===1){
            initial_object['type'][i]="Storage";
          }
          else if(i===2){
            initial_object['type'][i]="Building size";
          }
          else{
            initial_object['type'][i]="Component";
          }
          this.setState(initial_object);



      }

    }

The render function

render()
    {
        return (
               //clonable elements
                 <ul className="description-input">
                   {Array(20).fill(1).map((el, i) =>
                   <li >
                     <select name="type" onChange={this.setValue.bind(this, 'type',i)}>
                       <option value="Component">Component</option>
                       <option value="Building">Bulding</option>
                       <option value="Storage">Storage</option>
                       <option value="Building Size">Building size</option>
                     </select>
                     <div className={"int-input" +this.state.type[i]!='Building' ? 'hidden' :''}>
                       <input type="text" name="int_input" onChange={this.setValue.bind(this, 'int_input',i)}/>
                     </div>

                   </li>
                  )}

                 </ul>


        );

I am trying to predefine the states so that I can pre load some form element with default values .

I got error Uncaught TypeError: Cannot read property 'type' of null

I want to declare something like below which is giving syntax error as well

this.state={
                  type[0]:'Building',
                  type[1]:'Building',
                  type[2]:'Building',
                  type[3]:'Building',
                  type[4]:'Building',
                  type[5]:'Building',
                  type[6]:'Building',
                  type[7]:'Building',
                  type[8]:'Building',
                  type[9]:'Building',


          }

FYI if you Object.assign(initial_object['type'], ['Building', 'Storage', 'Building size']); you can loop from 3..19 and not need any if logic — Paul S.
– Paul S., Commented Oct 5, 2017 at 0:55

Austin Greco · Accepted Answer · 2017-10-05 00:47:44Z

1

In the constructor, you should set the state directly instead of calling setState:

this.state = {};

So it would be:

class DescriptionComponent extends React.Component {
  constructor(props) {
    super(props);
    initial_object['type'] = {};
    for (var i = 0; i < 20; i++) {
      if (i === 0) {
        initial_object['type'][i] = 'Building';
      } else if (i === 1) {
        initial_object['type'][i] = 'Storage';
      } else if (i === 2) {
        initial_object['type'][i] = 'Building size';
      } else {
        initial_object['type'][i] = 'Component';
      }
    }
    this.state = initial_object;
  }
}

The error is saying that this.state is undefined

If you want to set it directly, then you would write it as an array:

this.state = {
  type: [
    'Building',
    'Storage',
    'Building size',
    'Component',
    'Component',
    'Component' // etc..
  ]
};

edited Oct 5, 2017 at 0:47

answered Oct 5, 2017 at 0:42

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Define array of object as state variables on ECMA6/react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related