I am building a discrete bar graph component from scratch to display flights arrival/departure for every hour of the day. I need to basically match some of the data (flight and time) to a particular div and render it within the div. For example in image, I need to get the list of airplanes, determine whether it is for Arrivals/destinations and match it to the x-axis time range and render it within the appropriate div. I can have unique div ids see example
{
"AirplaneData": {
"Arrivals":[
{"BIO": "0:00"},
{"VGU": "2.00"},
{"MEX": "4.00"}],
"Departures": [
{"BIO": "3:00"},
{"VGU": "4.00"},
{"MEX": "6.00"}]
}
}
<div className={classes.bars}>
<div className={classes.graph}>
<div className={classes.bar} key="somekey">{DISPLAY SOME COMPONENT HERE}</div>
<div className={classes.label1}><span style= {{marginLeft: "10px"}}>0.00</span></div>
<div className={classes.bar}></div>
</div>
<div className={classes.graph}>
<div className={classes.bar} key="someotherkey"><h1>{DISPLAY SOME COMPONENT HERE}</h1></div>
<div className={classes.label2}><span style= {{marginLeft: "10px"}}>1.00</span></div>
<div className={classes.bar}></div>
</div>
</div>
.... repeat divs for every hour
How do I render the airplane time data within the appropriate divs (basically matching the div key to the time from the airplane data.)
So if you're saying you want to render content dynamically from a list of data? I would look into the map
and filter
functions.
With your example, you could return a set of divs using your array of data. similar to this concept airplaneDataArray.map(data => return <div>...</div>);
The "data" within the mapped array pretty much represents a single piece in the array, so you'd be able to call specific parts of the array using data.arrivals.key
, and so on and so forth. This will generate the divs dynamically without hardcoding a bunch of div rows.
Now if you only want to get arrivals at a specific time, you could use filter to filter out arrivals that don't match the time you want. Honestly not exactly understanding your use case that much so a better example, or something more indepth would be helpful.