React.js, correct way to iterate inside DOM

Question

Im new in ReactJS...

I have a project with the following class components structure:

index.js
  --app
    --chat
  --header
  --left
  --right

In the chat.js component, I make a google search with the api to retrieve images based on specific keyword... My intuitive solution was:

this.client.search("cars")
                .then(images => {
                    for(let el of images) {
                    ReactDOM.render(<img src="{{el.url}}" syle="{{width: '100%'}}" />, document.querySelector('#gimages'));
                    }
                });

It is correct? Or I may to use Components with stored states with flux (redux)?

Dacre Denny · Accepted Answer · 2018-08-20T00:02:43.740

Perhaps a simpler more conventional use of react would achieve what your require?

You could follow a pattern similar to that shown below to achieve what you require in a more "react-like" way:

class Chat extends React.Component {

  constructor(props) {
    super(props)
    this.state = { images : [] } // Set the inital state and state
                                 // model of YourComponent
  }

  componentDidMount() {

    // Assume "client" has been setup already, in your component

    this.client.search("cars")
    .then(images => {

      // When a search query returns images, store those in the
      // YourComponent state. This will trigger react to re-render 
      // the component
      this.setState({ images : images })
    });
  }

  render() {

    const { images } = this.state

    // Render images out based on current state (ie either empty list, 
    // no images, or populated list to  show images)
    return (<div>
        { 
          images.map(image => {
              return <img src={image.url} style="width:100%" />
          })
        }
    </div>)
  }

}

Note that this is not a complete code sample, and will require you to "fill in the gaps" with what ever else you have in your current Chat component (ie setting up this.client)

What error do you get ? Have just updated answer if you want to retry that. Added missing ) — Dacre Denny, Aug 20 '18 at 00:03
Sorry, seems like Google dont return array... So I converted it with `Array.from(this.state.images)` — JuliSmz, Aug 20 '18 at 01:32

devserkan · Answer 2 · 2018-08-20T00:12:07.437

This is not the way you should go, you don't need to use ReactDOM.render for each item. Actually, you don't need to use ReactDOM.render at all. In your component you can use a life-cycle method to fetch your data, then set it to your local state. After getting data you can pass this to an individual component or directly render in your render method.

class Chat extends React.Component {
  state = {
    images: [],
  }

  componentDidMount() {
    this.client.search( "cars" )
      .then( images => this.setState( { images } ) );
  }

  renderImages = () =>
      this.state.images.map( image => <Image key={image.id} image={image} /> );

  render() {
    return (
      <div>{this.renderImages()}</div>
    );
  }
}

const Image = props => (
  <div>
    <img src={props.image.url} syle="{{width: '100%'}}" />
  </div>
);

At this point, you don't need Redux or anything else. But, if you need to open your state a lot of components, you can consider it. Also, get being accustomed to using methods like map, filter instead of for loops.

React.js, correct way to iterate inside DOM

2 Answers2