CODEWITHSUNDEEP
javascriptarraysreactjs
Whirlwind991
Whirlwind991

Reputation: 495

Repeating ReactDOM.render based on array length

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?

Upvotes: 1

Views: 98

Answers (1)

Derek
Derek

Reputation: 4751

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')
);

Upvotes: 1

Related Questions