Is it possible to use 1D array to render 2D grid in React?-CodePudding

I wanted to render an array into a 2d grid (3 rows and 3 columns). The array itself is just a one-dimensional array.

const array = Array.from({ length: 9 }, (_, i) => i   1);

I have a React component that renders it into a list of div

export default function App() {
  return (
    <div className="App">
      <div className="grid">
        {array.map((cell) => (
          <div className="cell">{cell}</div>
        ))}
      </div>
    </div>
  );
}

Now the cells are just stack on each other which is expected. I wonder if there is a way to make it a 3 x 3 grid without having to change the existing DOM structure by only adding styles?

CodePudding user response：

Yes, this is about CSS Grid. The following is a plain HTML/CSS example, but it can easily be converted to React.

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.cell {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>  
  <div >4</div>
  <div >5</div>
  <div >6</div>  
  <div >7</div>
  <div >8</div>
  <div >9</div>  
</div>

</body>
</html>

CodePudding user response：

  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

import "./styles.css";
const array = Array.from({ length: 9 }, (_, i) => i   1);

export default function App() {
  return (
    <div className="App">
      <div className="grid-container">
        {array.map((cell) => (
          <div className="grid-item">{cell}</div>
        ))}
      </div>
    </div>
  );
}

https://codesandbox.io/s/busy-panka-mf4rhv?file=/src/App.js:0-314

CodePudding user response：

Here is a quick example that uses CSS grid to style the layout from array.map().

It can run from the snippet:

const array = Array.from({ length: 9 }, (_, i) => i   1);

const App = () =>
<div className="App">
  <div className="grid">
    {array.map((cell, index) => (
    <div className="cell" key={cell}>{cell}</div>
    ))}
  </div>
</div>
;

ReactDOM.render(<App />, document.querySelector('#root'));

.grid {
 display: grid;
 grid-template-columns: repeat(3, 50px);
 grid-template-rows: repeat(3, 50px);
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  background-color: pink;
}

.cell:nth-child(even) {
  color: #fff;
  background-color: hotpink;
}

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