How to loop component in reactjs?

Question

I created an component

<div>
<img src= {this.props.source} style={this.props.style} />
</div>

And in other component I call this component to create my images with:

render() {
return (
<Image source={src_image} style={imgstyle}/>
<Image source={src_image} style={imgstyle}/>
<Image source={src_image} style={imgstyle}/>
<Image source={src_image} style={imgstyle}/>
)}

My images are created as I want.Now I want to loop all my images to modify all their style by function button .Please How to loop all my images one by one in the function button ?

Answer 1

Create an array of <Image/> components in your render() function, iterate through that array:

render() {
  let images = [];
  for (let i = 0; i < 4; i++) { // Use whatever looping you need here
    images.push(<Image source={src_image} key={i} style={imgstyle}/>); // Edit your images here
  }
  return (
    <div>{images}</div>
  );
}

In the example above, we are using the index as the key but if your array is not static, you need a unique identifier as your key instead as the index is not reliable when the array can change. For instance, if your images are unique, you can use the image source (or a hash of it) as your key. More about lists and keys.

Answer 2

If you initialize an Images array, you can use :

  render() {
      const { images } = this.props;
      // images = [{src_image: '...', imgstyle: {...}}, {src_image: '...', imgstyle: {...}}]

      return images.map((image) => <Image source={image.src} style={image.imgstyle}/>)
    }