How to display data from array or object in grid layout in react js

How to display data from array or object in grid layout in react js

Posted by Margie Crona on February 22, 2022

In this lesson I will show you how to display data in a grid layout from a single array or object. 

Here is an example of the object that we will be working with:

    jobList = [

        {name:'Journalist', salary:'$300', description:'You will be writing reports' },

        {name:'Dancer', salary: '$100', description:'You be dancing'},

        {name:'Pilot', salary: '$1000', description:'You will be flying an aircraft'},

        {name:'Doctor', salary: '$4200', description:'You will be taking care of patients'},

        {name:'Actor', salary: '$50', description:'You will be acting'},

        {name:'Singer', salary: '$10', description:'You will be singing'},

    ];

Now place the object in a loop in order to arrange the count into a multidimensional array.

  • This function takes two params, the first is the postions of items in the object, the second is the amount for each array. 
  • The object length is broken down into a simple array that stores the position of each item.
  • Then that array is spliced into blocks of smaller arrays based on the value of the second param and placed into the block array using a while loop to create the mutltidimentional array. 
       const arrayBlock = (jobList, x) => {

          const array = jobList.slice();

          const blocks = [];

          while (array.length) blocks.push(array.splice(0, x));

          return blocks;

       };

Now, use the multidimentional array on the react map loop.

If you notice the function takes the two params. connecting to the react map loop it uses the return value of the function to loop based on the amount of array within the arrayBlock.

  • Another map array is placed within the first map array and a count method placed in the second map array in order to get the values from each item within the object.
arrayBlock([...Array(jobList.length).keys()], row).map((row, i) => (
            <div key={i} className="row justify-content-center mt-5">
                {row.map((value, i) => (
                    <div key={i} className="col-3">
                        {countAmount()}
                        <MDBCard>
                            <MDBCardHeader>
                                <MDBCardText>{jobList[count].name}</MDBCardText>
                            </MDBCardHeader>
                            <MDBCardBody>
                                <div className="float-start">Salary: {jobList[count].salary}</div>
                                <div className="float-start">Description: {jobList[count].description}</div>
                            </MDBCardBody>
                        </MDBCard>
                    </div>
                ))}
            </div>

Finally, this is the component with the array below:

import React, { Component } from "react";

import "bootstrap/dist/css/bootstrap.min.css";

import {JobList} from "./components/JobList";

import './App.css';

class App extends Component {

    jobList = [
        {name:'Journalist', salary:'$300', description:'You will be writing reports' },
        {name:'Dancer', salary: '$100', description:'You be dancing'},
        {name:'Pilot', salary: '$1000', description:'You will be flying an aircraft'},
        {name:'Doctor', salary: '$4200', description:'You will be taking care of patients'},
        {name:'Actor', salary: '$50', description:'You will be acting'},
        {name:'Singer', salary: '$10', description:'You will be singing'},
    ];

  render() {
    return (
      <div className="container">
        <JobList jobList={this.jobList}/>
      </div>
    );
  }
}

export default App;

The full JobList component looks like below:

import React from "react";
import {MDBCard, MDBCardBody, MDBCardHeader, MDBCardText} from "mdbreact";

export const JobList = ({jobList}) => {
    let amt = 0;
    let count = 0;
    let row = 0;

    const arrayBlock = (jobList, x) => {
        const array = jobList.slice();
        const blocks = [];
        while (array.length) blocks.push(array.splice(0, x));
        return blocks;
    };

    if(jobList.length >= 3){row = 3}else{row = jobList.length}

    const countAmount = () => {
        count = amt++;
    };

    return (
        arrayBlock([...Array(jobList.length).keys()], row).map((row, i) => (
            <div key={i} className="row justify-content-center mt-5">
                {row.map((value, i) => (
                    <div key={i} className="col-3">
                        {countAmount()}
                        <MDBCard>
                            <MDBCardHeader>
                                <MDBCardText>{jobList[count].name}</MDBCardText>
                            </MDBCardHeader>
                            <MDBCardBody>
                                <div className="float-start">Salary: {jobList[count].salary}</div>
                                <div className="float-start">Description: {jobList[count].description}</div>
                            </MDBCardBody>
                        </MDBCard>
                    </div>
                ))}
            </div>
        ))
    )
}

Hopefully this will work for you.