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: stackoverflow.com/questions/20626685/… — cjones26
– cjones26, Commented Feb 27, 2020 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
– Khauri, Commented Feb 27, 2020 at 19:45

Chris · Accepted Answer · 2020-02-27 19:50:03Z

1

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>

edited Feb 27, 2020 at 19:50

answered Feb 27, 2020 at 19:45

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

2 Comments

Cornel Raiu Over a year ago

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

Chris Over a year ago

@CornelRaiu Already fixed :) Edit: nvm, fixed in snippet but forgot to in code block

Mechanic · Accepted Answer · 2020-02-27 19:52:46Z

0

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.

answered Feb 27, 2020 at 19:52

Mechanic

5,4684 gold badges19 silver badges44 bronze badges

Collectives™ on Stack Overflow

Create multiple React Elements using one function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related