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