Repeating ReactDOM.render based on array length

Question

I have a simple React app that contains an array of data displayed in a container created within React:

var products = [
{ name: 'product 1'},
{ name: 'product 2' },
{ name: 'product 3' },
{ name: 'product 4' }
];

var Status = React.createClass({

render: function () {

    var listItems = this.props.items.map(function (item) {
        return (
            <h2 key={item.name}>
               {item.name}
            </h2>
        );
    });
    return (           
        <div className="ContainerName">
        {listItems}                                              
        </div>     
    );
}
});

ReactDOM.render(<Status items={products} />,
document.getElementById('statusContainer'));

The issue I have is that I want the "ContainerName" div (or Status var) to render according to the number of items in the array (4 times, but currently it only renders once).

I tried this but it doesnt work:

ReactDOM.render(<Status items={products} />,
document.getElementById('statusContainer'), products.length);

Is ReactDom only meant to be used once? Or is there there a way I can reuse the component according to the array length? Or am I completely misunderstanding?

what you want to achieve? why you want to use ReactDOM.render 4 times any specific reason? — Mayank Shukla
– Mayank Shukla, Commented Sep 5, 2017 at 3:26
@MayankShukla I just want the div to render according to the number of items in the array, it doesn't have to be specifically 4 times - if the array had 10 items I'd therefore like the div to render 10 times. — Whirlwind991
– Whirlwind991, Commented Sep 5, 2017 at 3:29
The render function must return a single root element with any number of children. Therefore you could wrap your h2 in a div.ContainerName and rename the one in the return to something like div.statusContainerRoot. — Derek
– Derek, Commented Sep 5, 2017 at 3:49
why would you even want it to render the same number of times as the array length. How will it help. Not a good thing to do — Shubham Khatri
– Shubham Khatri, Commented Sep 5, 2017 at 6:41
@ShubhamKhatri Well I guess thats why I asked the question on here - so I could understand the right way to do it! haha — Whirlwind991
– Whirlwind991, Commented Sep 5, 2017 at 7:09

Derek · Accepted Answer · 2017-09-05 03:54:48Z

1

The render function must return a single root element with any number of children. This would work:

var products = [
  { name: 'product 1'},
  { name: 'product 2' },
  { name: 'product 3' },
  { name: 'product 4' }
];

var Status = React.createClass({
  render: function() {
    var listItems = this.props.items.map(item => {
      return (
        <div className="ContainerName" key={item.name}>
          <h2>{item.name}</h2>
        </div>
       );
    });

    return <div className="statusComponentRoot">{listItems}</div>;
  }
});

ReactDOM.render(
  <Status items={products} />,
  document.getElementById('statusContainer')
);

answered Sep 5, 2017 at 3:54

Derek

4,7513 gold badges25 silver badges41 bronze badges

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

1 Comment

Whirlwind991 Over a year ago

Ahhh yep that makes sense. Yeah I thought it would be simple to just duplicate the render enough times, but I guess not! Cheers for the help, thats awesome

Collectives™ on Stack Overflow

Repeating ReactDOM.render based on array length

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related