Printing attributes of an object array as a grid in ReactJs

by deepak8 Updated: Nov 28, 2022

Object array can be easily displayed as a grid with the help of CSS styling. In this solution kit, I am sharing the code snippet that can be used to display a sample image in a grid form.

PS: Preview of the output that you will get on running this code from your IDE

Code

In this solution we use the displayGrid and gridItem CSS .class Selector to achieve it.

Printing attributes of an object array as a grid in ReactJs

JavaScriptLines of Code : 26License : CC BY-SA 4.0

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <div className="displayGrid">
      {Array(24).fill(0).map(() => (<img className="gridItem" src="https://picsum.photos/200" />))}
    </div>
  </React.StrictMode>,
  rootElement
);
.displayGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.gridItem {
  display: inline;
  height: 100px;
  width: auto;
}
<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>

<body>
  <div id="root"></div>
</body>

Copy the code using the "Copy" button above, and paste it in a react project in your IDE.
add the displayGrid to the grid element and the gridItem to the items present inside the object array (any HTML element can be added in it).
Run the application to see the object array as a grid.

I found this code snippet by searching for "object array as a grid in ReactJs" in kandi. You can try any such use case!