In my React component, I am working with a JSON array and generating divs to display key-value pairs. Each object in the JSON contains approximately 60 key-value pairs. In this particular case, I am rendering divs for the 19th index of each object:
import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"
class Maps extends Component {
constructor() {
super();
const data = df3;
this.state = data
}
renderDiv = () => {
var df4 = df3["Devotions"];
return df4.map(v => {
return Object.keys(v).map((host) => {
return (
<div class={host}>
{host} {v[host][19]}
<div class='space' style={{ borderRadius:'19px',
transform:`scale(${v[host][19]},${v[host][19]})`,
opacity:'9%'}} >
</div>
</div>
);
});
});
};
render() {
return <div id="Maps">{this.renderDiv()}</div>;
}
}
export default Maps
I want to organize the rendering process so that the divs for each index are displayed sequentially on the screen.
return Object.keys(v).map((host) => {
return (
<div class={host}>
{host} {v[host][19]}
<div class='space' style={{ borderRadius:'19px',
transform:`scale(${v[host][19]},${v[host][19]})`,
opacity:'9%'}} >
</div>
</div>
I'm considering wrapping sets of divs that I want to return in a single div and connecting them to a keyframe, but I'm exploring other possibilities for a more elegant solution.
Any assistance or advice would be greatly appreciated!