React Dynamically render component within div based on div id

Question

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.)

id recommend a different approach...take the flight data objects...transform it a list of objects that match the GUI design...then from there it's a simple map of the new object — Ctznkane525, Aug 17 '21 at 16:31

score 1 · Accepted Answer · answered Aug 17 '21 at 18:05

1

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.

answered Aug 17 '21 at 18:05

Andrew

432
2
14

Thank you! I think this kinda makes sense. I am not super happy with hardcoding a bunch of divs either. For my use-case I dont really need to filter out arrivals or departures. All I need is a way to take thats airplane data and display it visually . I might need to sort the flights for a certain time visually (but that can be done easily). The only part I am wondering about is the need to make sure that if there are no arrivals/departures for a given time ex: in the diagram 0:00 has no flights it displays just the background. – Ap-Mich Aug 17 '21 at 18:16
1

Okay, if you're displaying by time, my suggestion is you should have a different data structure. Instead, your time should be a top level key and then each flight for the time should be nested under that. Like under arrivals have "00:00": { "BIO": "00:00" }, or even better, just store each flight in an array "00:00": ["BIO", "VLG", etc.]. Then you can iterate through the keys of data and display the key, and then easily display flights. – Andrew Aug 18 '21 at 02:14
Thank you ! this is what i am thinking! Appreciate the help! – Ap-Mich Aug 18 '21 at 13:03

React Dynamically render component within div based on div id

1 Answers1