1

I am working with react I want to show some dynamic content on UI but unable to loop the data as I am newbie so finding this difficult to do

 state={
dashboardManpowerCount:{
        "CurrentMonth": {
          "Total No of employes": 25,
          "Ariving": 10,
          "Exited": 8
        },
        "PreviousMonth": {
          "Total No of employes": 25,
          "Ariving": 10,
          "Exited": 8
        }
      }
           }

class currAndprevMonthcCounts extends Component {
render(){
const {dashboardManpowerCount} = this.state

return(
<div>
<div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                    <div className="row">
                       <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">
                       <h6>Previous Month</h6>
                    <h2>395</h2> 
                    </div>
                    <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">

                    <span className="badge badge-pill badge-secondary mt-2"
                    >+7 Ariving</span>
                    <br></br>

                    <span className="badge badge-pill badge-secondary mt-3">-3 Exiting</span> 

                    </div>
                </div>
                </div>
                <div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                <div className="row">
                       <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">
                    <h6>Previous Month</h6>
                    <h2>395</h2>
                    </div>
                    <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">

                    <span className="badge badge-pill badge-secondary mt-2">+5 Ariving</span>
                    <br></br>

                    <span className="badge badge-pill badge-secondary mt-3">-3 Exiting</span> 

                    </div>
                </div>
                </div>
</div>
)
}

}

there are two options current month data and previous month data I want to loop through the object and render in place of static content in my jsx

this is how I am rendering this

Edit / Update

I think I am missing something here is working example with static data on UI This is what I am trying to get

Improve this question
0

1 Answer 1

Reset to default
2

Use object.keys or object.entries to loop through the properties of an object.

  render() {
    const { dashboardManpowerCount } = this.state;
    const dashboardManpowerCountArray = Object.entries(dashboardManpowerCount);

    return (
      <div>
        {dashboardManpowerCountArray.map(arr => {
          return (
            <div key={arr[0]}>
              <h3>{arr[0]}</h3>
              {Object.entries(arr[1]).map(monthArr => {
                return (
                  <span key={monthArr[0]} style={{ display: "block" }}>{`${
                    monthArr[0]
                  } ${monthArr[1]}`}</span>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  }

See this stackblitz. Obviously change the styling and tags how you like.

update

Here's the jsx you can use to display your data-

import React from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.min.css";

class Events extends React.Component {
  state = {
    dashboardManpowerCount: {
      CurrentMonth: {
        "Total No of employes": 25,
        Ariving: 10,
        Exited: 8
      },
      PreviousMonth: {
        "Total No of employes": 25,
        Ariving: 10,
        Exited: 8
      }
    }
  };
  render() {
    return (
      <div className="divParent row container">
        {Object.entries(this.state.dashboardManpowerCount).map(
          ([monthName, monthData]) => {
            return (
              <div className="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                <div className="row">
                  <div className="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5">
                    <h6>{monthName}</h6>
                    <h2>{monthData["Total No of employes"]}</h2>
                  </div>
                  <div className="col-12 col-sm-12 col-md-6 col-lg-7 col-xl-7">
                    <span className="badge badge-pill badge-secondary mt-2">
                      {`+${monthData.Ariving} Ariving`}
                    </span>
                    <br />
                    <span className="badge badge-pill badge-secondary mt-3">
                      {`-${monthData.Ariving} Exiting`}
                    </span>
                  </div>
                </div>
              </div>
            );
          }
        )}
      </div>
    );
  }
}

render(<Events />, document.getElementById("root"));

But this time the component is not fully dynamic. If your object's schema changes in the future you will have to change the jsx too.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

It seems to be very complicated as i am not able to put the styling as it was ( grid system)
Please cvheck my edit I have attached the code-sandbox link for referral
@dheerajkumar You can open the stackblitz link in my answer and customize the styling and then add it to your project. Where exactly are you stuck?
yes I ahve tried editing your code, but look I don't need the total no of employee only this count I need, tehre I am stuck you can check the link I have shared
Well, what's stopping you from displaying the count you need? The data you used in the codesandbox is not in the state.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.