CODEWITHSUNDEEP
javascriptreactjs
Lightice
Lightice

Reputation: 31

Nesting elements dynamically in React

I'm a beginner with React, and I wish to try and create dynamically the number of content rows and boxes depending on the amount of content I have available, but while creating the rows is easy, for some reason it doesn't seem to be possible to embed the boxes into them in the same manner. Here's an example of the code that I've been trying to work with so far:

EDIT (Clarifying the code): 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const yAxis = ["y1", "y2", "y3", "y4", "y5"];
const xAxis = ["x1", "x2", "x3", "x4", "x5"];

const rows = yAxis.map((row) =>
  <div key={row.toString()} className={"boxrow " + row.toString()} >
    {boxes}
  </div>
);

const boxes = xAxis.map((box) =>
  <div key={box.toString()} className={"box " + box.toString()}>
    {box}
  </div>
);

class App extends Component {
  render() {
    return (
        <div className="rows">
          {rows}
        </div>
    );
  }
}

export default App;

What I would like to know, why can't I simply embed the boxes-method inside the rows-method? I was under the impression that this sort of thing was exactly what React was designed for.

EDIT:

Alternately, I tried the following approach, only for it to result in errors:

Main index: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Boxes from './Boxes'; 
import Rows from './Rows';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

Boxes: 

import React, { Component } from 'react';

const xAxis = ["x1", "x2", "x3", "x4", "x5"];

class Boxes extends Component {
    boxes = xAxis.map((box) =>
        <div key={box.toString()} className="box ">
            {box}
        </div>
    );
}

export default Boxes;

Rows: 

import React, { Component } from 'react';
import Boxes from './Boxes';

const yAxis = ["y1", "y2", "y3", "y4", "y5"];

class Rows extends Component {
    rows = yAxis.map((row) =>
        <div key={row.toString()} className="boxrow">
            <Boxes />
        </div>
    );

}

export default Rows;

Upvotes: 2

Views: 580

Answers (1)

Brandon Mowat
Brandon Mowat

Reputation: 374

I think this is what you were trying to produce:

    const yAxis = ["y1", "y2", "y3", "y4", "y5"];
    const xAxis = ["x1", "x2", "x3", "x4", "x5"];

    class Box extends React.Component {
      render() {
        return (
          <div>{this.props.boxes.map((box) =>
            <div>{box}</div>
          )}</div>
        );
      }
    }

    class Row extends React.Component {
      render() {
        return (
          <div>{this.props.rows.map((row) =>
            <div>{<Box boxes={xAxis}/>}</div>
          )}</div>
        );
      }
    }

    class App extends React.Component {
      render() {
        return (
            <div className="rows">
              <Row rows={yAxis}/>
            </div>
        );
      }
    }

    ReactDOM.render(<App/>, document.body)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

One thing I noticed is that your stateless components were not structured properly. They should return a single component.

Second, you should really try to make use of props.

Upvotes: 1

Related Questions