Back ArrowExplore all topics
technology logo
technology logo

Printing attributes of an object array as a grid in ReactJs

share link

by deepak8 dot icon Updated: Apr 12, 2023

Solution Kit Solution Kit  

When working with ReactJS, it's common to need to display data from an array of objects in a grid layout. This can be useful for displaying tables, lists, or any other structured data type.

 

To accomplish this, you can use the map() method to loop through the array of objects and generate a JSX element for each project. You can display the object's attributes within each element in a grid layout CSS. In this solution kit, I am sharing the code snippet that can be used to display a simple 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

JavaScriptdotLines of Code : 26dotLicense : Strong Copyleft (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>
  1. Copy the code using the "Copy" button above, and paste it in a react project in your IDE.
  2. 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).
  3. 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!

Dependent Libraries

reactby facebook

JavaScript doticonstar image 208726 doticonVersion:v18.2.0doticon
License: Permissive (MIT)

The library for web and native user interfaces

Support
    Quality
      Security
        License
          Reuse

            reactby facebook

            JavaScript doticon star image 208726 doticonVersion:v18.2.0doticon License: Permissive (MIT)

            The library for web and native user interfaces
            Support
              Quality
                Security
                  License
                    Reuse

                      If you do not have react application that is required to run this code, you can install it by clicking on the above link of react page in kandi.

                      You can search for any dependent library on kandi like React.

                      Environment Tested

                      I tested this solution in the following versions. Be mindful of changes when working with other versions.

                      1. The solution is created in react v18.2.0
                      2. The solution is tested on chrome browser


                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.