Create multiple React Elements using one function

Question

I'm trying to grid a grid with one function that adds 50px to the top css element for each line created.

class Grid extends Component {

  createGrid = () => {
    for (let i = 1; i < 50; i++) {
      return(
        <div style={{
          position: "absolute",
          top: i * 5,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}>
        </div>
      )
    }
  }
}

export default Grid;

class MainPage extends Grid {
  render() {
    return(
      <div>
        {this.createGrid()}
      </div>
    )
  }
}

How would I render this so it creates x amount of lines for the grid, while also increasing the top css by 50px

This seems like something you would do with CSS / Flexbox more than something you'd want to do manually inline utilizing the style prop in React. I would recommend looking at something like this: https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items — cjones26, Feb 27 '20 at 19:44
To start, you should probably be pushing every element you create to an array and then returning that. Putting return inside of a `for` loop will also exit your function, so currently you're just returning the first element from the first iteration of the loop. — Khauri, Feb 27 '20 at 19:45

Chris · Accepted Answer · 2020-02-27T19:50:03.517

Rather than a (typical) function, just create another React component that does this.

Something like:

class Grid extends Component {
  render() {
    return [...Array(this.props.items)].map((_x, i) => (
      <div
        key={i}
        style={{
          position: "absolute",
          top: i * 50,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}
      />
    ))
  }
}

export default Grid;

class MainPage extends Component {
  render() {
    return(
      <div>
        <Grid items={50} />
      </div>
    )
  }
}

Also, to have each item have top increase by 50px do top: i * 50

Runnable demo:

class MainPage extends React.Component {
  render() {
    return(
      <div>
        <Grid items={50} />
      </div>
    )
  }
}

class Grid extends React.Component {
  render() {
    return [...Array(this.props.items)].map((_x, i) => (
      <div
        key={i}
        style={{
          position: "absolute",
          top: i * 50,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}
      />
    ))
  }
}

ReactDOM.render(<MainPage />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

you will get this: `Each child in an array should have a unique "key" prop.` I guess. You should also add the unique key to the `div` element in the map function — Cornel Raiu, Feb 27 '20 at 19:49
@CornelRaiu Already fixed :) Edit: nvm, fixed in snippet but forgot to in code block — Chris, Feb 27 '20 at 19:49

score 0 · Answer 2 · answered Feb 27 '20 at 19:52

For your grid generator, this way you can generate elements and using them in render function:

createGrid = () => {
    let grids = [];
    for (let i = 1; i <= 50; i++) {
      grids.push(
        <div style={{
          position: "absolute",
          top: i * 5,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}>
        </div>
      )
    }
    return grids;
  }

But Always favor composition over inheritance classes in react components.

Create multiple React Elements using one function

2 Answers2