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
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.