Can we add state name dynamically in react

Question

Getting the object from the dataBase and after that i am converting it to array to change the state of the rect component and now i want to update the data to my view that i have created in react.

the method i am following is as under:

var PreviewContainer = React.createClass({
  getInitialState: function() {
    return {
      sourceImg: {
        src0: 'xyz',
        src1: 'xyz',
        src2: 'xyz',
        src3: 'xyz'
      },
      id: '',
      alter: "myalt"
    };
  },
  render: function() {
    Interfaces.previewContainer = this;
    var imgContainer = [];

    for (var i = 0; i < 4; i++) {
      imgContainer.push(React.createElement(PreviewImgContainer, {
        key: i,
        sourceImg: this.state.sourceImg['src' + i],
        alter: this.state.alter
      }));
    }
    return (
      React.createElement('div', {
          className: 'previewContainer'
        },
        imgContainer,
        React.createElement(ColorCardParent))
    );
  }
});

and after that i have to set these imagaes in the container as follows way using static methods

Interfaces.previewContainer.setState({sourceImg: {
    src0: templatearray[0].image_path.slice(1),
    src1: templatearray[1].image_path.slice(1),
    src2: templatearray[2].image_path.slice(1),
    src3: templatearray[3].image_path.slice(1)
  }
});

Is there a way to do this so that i can just do this dynamically.

I'm not clear on your question. Do you want to avoid using Interfaces.previewContainer = this? — davestevens
– davestevens, Commented Nov 10, 2015 at 12:59
i set the state as src0: templatearray[0].image_path.slice(1) . This is a static way i have more then 100 images that i have to display is there a dynamin way to set there state i.e using loop etc. — Muhammad Asif Javed
– Muhammad Asif Javed, Commented Nov 10, 2015 at 14:54

wintvelt · Accepted Answer · 2015-11-10 15:05:47Z

1

Not quite clear what you are trying to achieve and what the issue is, but you could fill your sourceImg object as follows:

var sourceImg = {};
for (var i=0; i<templatearray.length; i++) {
  var srcKey = "src" + i.toString();
  sourceImg[srcKey] = templatearray[i].image_path.slice(1);   // fill object dynamically
}
Interfaces.previewContainer.setState({ sourceImg : sourceImg });

BTW: Dynamically filling an object is unrelated to react.

answered Nov 10, 2015 at 15:05

wintvelt

14.1k3 gold badges41 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Can we add state name dynamically in 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