Create html in reactjs using nested for loops.

Question

I want to create nested elements in react js but following does not seem to work.

        var allSeats = [];
        for( let i = 0 ; i<5 ; i++ ) {
          allSeats.push( <div className="each-row"> );
          for( let j=0; j<2 ; j++ ) {
            allSeats.push( <div className="each-seat">hei</div> );
          }
          allSeats.push( </div> );
        }

        return (
          <div className="theater">
            {allSeats}
          </div>
        );

What's wrong with the above code?

allSeats.push( </div> ); this is not a valid JSX element. It always needs an opening and closing tag. You will have to find another approach for this. — Fabian Schultz
– Fabian Schultz, Commented Oct 11, 2016 at 14:34

Alexander Doroshenko · Accepted Answer · 2016-10-11 15:05:24Z

1

Piotr is right - much better to split your code to components. But just in case, here's fixed snippet like you have:

var rows = [];

    for(let i=0; i<5; i++) {
        var seats = [];

    for(let j=0; j<2; j++) {
        seats = seats.concat(<div className="seat"></div>);
    }

    rows = rows.concat(<div className="row">{seats}</div>);
}

return (
    <div className="theater">
        {rows}
    </div>
);

answered Oct 11, 2016 at 15:05

Alexander Doroshenko

5462 silver badges7 bronze badges

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

Comments

Piotr Berebecki · Accepted Answer · 2016-10-11 14:45:08Z

As Fabian noted - JSX elements must be closed:

All tags must be closed, either with the self-closing format or with a corresponding closing tag https://facebook.github.io/react/tips/self-closing-tag.html

Would splitting into components work for your intended use? Demo here: http://codepen.io/PiotrBerebecki/pen/ALabXK

class Rows extends React.Component {
  render() {

    var allRows = [];
    for( let i = 0 ; i<5 ; i++ ) {
      allRows.push( <div className="each-row">Row<Seats /></div> );   
    }

    return (
      <div className="theater">
        {allRows}
      </div>
    );
  }
}


class Seats extends React.Component {
  render() {

    var allSeats = [];

    for( let j=0; j<2 ; j++ ) {
      allSeats.push( <div className="each-seat">Seat</div> );
    }

    return (
      <div className="seats">
        <b>{allSeats}</b>
      </div>
    );
  }
}

ReactDOM.render(
  <Rows />,
  document.getElementById('app')
);

Collectives™ on Stack Overflow

Create html in reactjs using nested for loops.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related