根据React.JS中的对象数组动态渲染节/ div

Question

I have an array of objects to show data on the web page and all the div should according to key in the array object (in this order).

var priceSize = <div>HTML goes here</div>
var agentDetails = <div>HTML goes here</div>
var mappedHouses = <div>HTML goes here</div>
var sideComps = <div>HTML goes here</div>
var priceDays = <div>HTML goes here</div>

render() {
 return (
 report_sequence.map((data) => 
 <div className={data.key}>
  {
   data.key === 1 ? subjectProperty : 
   data.key === 2 ? priceSize : 
   data.key === 4 ? priceDays : 
   data.key === 5 ? sideComps : 
   data.key === 6 ? mappedHouses : 
   data.key === 9 ? agentDetails : ''
  }
 </div>
 )
 );
}

This is my array :

var report_sequence = [
    {key : 1, value : "SUBJECT PROPERTY OVERVIEW"},
    {key : 2, value : "PRICE & SIZE GRAPH"},
    {key : 9, value : "AGENT SUMMARY"},
    {key : 4, value : "PRICE & DAYS ON MARKET GRAPH"},
    {key : 6, value : "MAPPED HOUSES"},
    {key : 5, value : "SIDE BY SIDE COMPARISION"}
   ]

I expect div arrangement according to my report sequence. Please help for the same.

Answer 1

A simple solution to dynamically render the HTML of your <div> component collection (ie priceSize , agentDetails , etc) would via a switch statement.

First, ensure that your HTML is defined as a valid component (ie leading capitalization):

var SubjectProperty = <div>HTML goes here</div>
var PriceSize = <div>HTML goes here</div>
var AgentDetails = <div>HTML goes here</div>
var MappedHouses = <div>HTML goes here</div>
var SideComps = <div>HTML goes here</div>
var PriceDays = <div>HTML goes here</div>

Next, update the component that renders the report_sequence array. One way to introduce the switch idea mentiond above would be via a locally defined method:

render() {

    /* Define a local helper that renders the component corresponding to
    a specific key  */
    const renderItem = (key) => {

      switch(key) {
        case 1: return <SubjectProperty/>;
        case 2: return <PriceSize/>;
        case 4: return <PriceDays/>;
        case 5: return <SideComps/>;
        case 6: return <MappedHouses/>;
        case 9: return <AgentDetails/>;
      }

      return null;
   }

   /* Invoke locally defined renderItem() method to dynamically render
   each list item based on item's key */
   return report_sequence.map((data) => 
       <div key={data.key} className={data.key}>
       { renderItem(data.key) }
       </div>)
} 

Answer 2

Here you have yours components mocks:

var PriceSize = <div>HTML goes here</div>
var AgentDetails = <div>HTML goes here</div>
var MappedHouses = <div>HTML goes here</div>
var SideComps = <div>HTML goes here</div>
var PriceDays = <div>HTML goes here</div>

Here is map will render proper component

const componentMap = {
  [1]: () => <PriceSize />
  [2]: () => <AgentDetails /> 
  [3]: () => <MappedHouses /> 
  [4]: () => <SideComps /> 
  [5]: () => <PriceDays /> 
}

And here you have your render function and:

• When your render components dynamically you need to add key property do allow identifying them somehow by React, I assumed that you have some property like ID in this data set (can be index or anything unique)
• I assumed there is something like type in mapped data set which allows rendering proper component,
• In curly brackets I'm checking if map has some value for given key and if it is I call it.

Code:

render() {
      report_sequence.map((data) => 
        return (
          <div className={data.key} key={data.id}>
            {this.componentMap[data.type] && this.componentMap[data.type]()}
          </div>
        );
      )
    }

Answer 3

Both approach will work fine for dynamic data rendering.

    return (
     report_sequence.map((data) => 
     <div className={data.key}>
      {
       data.key === 1 ? subjectProperty : 
       data.key === 2 ? priceSize : 
       data.key === 4 ? priceDays : 
       data.key === 5 ? sideComps : 
       data.key === 6 ? mappedHouses : 
       data.key === 9 ? agentDetails : ''
      }
     </div>
     )

//Second approach using switch according to Dacre Denny

   const renderItem = (key) => {
      switch(key) {
        case 1: return subjectProperty;
        case 2: return priceSize;
        case 4: return priceDays;
        case 5: return sideComps;
        case 6: return mappedHouses;
        case 9: return agentDetails;
        default: return null;
      }

   }