React component render dynamic content in tabs from a JSON object

Question

In my React component I am not able to render a dynamic tab from a JSON object. I am able to retrieve the JSON data key and the value array, but I am not able to render it in the UI.

I am using PrimeReact UI components. https://www.primefaces.org/primereact/#/tabview

Component

export default class Report extends Component {


    render() {                          

        const { splitGroupedStartingMaterials } = this.state

        return (
            <div>
                <TabView>
                    {
                        Object.keys(splitGroupedStartingMaterials).forEach(k => {
                            console.log('k : ' + k, JSON.stringify(splitGroupedStartingMaterials[k]));
                            return (<TabPanel header={'Family'}>
                                simple content here for testing
                            </TabPanel>);
                        })
                    } 
                </TabView>                              
            </div>);
        }
}

JSON Data :-

"splitGroupedStartingMaterials": {
  "1": [
    {
      "id": 45598,
      "symbol": "Mn",
      "description": "Mn(NO3)2 (fr mn flake)_[10377-66-9]",
      "priority": 1,
      "matrices": "HNO3",
      "family": "F2.0",
      "splitGroup": "1"
    },
    {
      "id": 45636,
      "symbol": "Ti",
      "description": "(NH4)2TiF6 (as Ti)_[16962-40-6]",
      "priority": 2,
      "matrices": "F- : HNO3",
      "family": "F1.1",
      "splitGroup": "1"
    }
  ],
  "2": [
    {
      "id": 45572,
      "symbol": "Cr",
      "description": "CrCl3 (fr Cr shot)_[10025-73-7]",
      "priority": 2,
      "matrices": "HCl",
      "family": "F3.1",
      "splitGroup": "1_2"
    }
  ]
}

Update:-

Console Logs:-

10:46:28.769 InOrganicCreateCustomQuote.jsx:704 k : 1 [{"id":45621,"symbol":"Sc","description":"Sc2O3 (as Sc)_[256652-08-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"},{"id":45636,"symbol":"Ti","description":"(NH4)2TiF6 (as Ti)_[16962-40-6]","priority":2,"matrices":"F- : HNO3","family":"F1.1","splitGroup":"1"},{"id":45640,"symbol":"V","description":"V2O5 (as V)_[1314-62-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"}]

10:46:28.770 InOrganicCreateCustomQuote.jsx:704 k : 2 [{"id":45646,"symbol":"Zr","description":"ZrCl2O (as Zr)_[7699-43-6]","priority":1,"matrices":"HCl","family":"F3.1","splitGroup":"1_2"}]

For this code no tabs are rendered

What specific problem are you facing? As it stands your code cycles through the "1" and "2" keys of the splitGroupedStartingMaterials object. What are you trying to renderr? What specific issue is arising? — Jayce444
I don’t think you can return in a foreach. Try using map instead. — evolutionxbox
@evolutionxbox the console.log line prints the key and value of the objects — Jay
Try console logging the return of Object.keys().forEach( ... it will probably be undefined. forEach has an undefined return value — evolutionxbox
Thanks Guys, seems React like only map instead of forEach. Now it works with map. — Jay

NewVigilante NewVigilante · Accepted Answer · 2020-01-20T10:44:49

Could you try:

export default class Report extends Component {


    render() {                          

        const { splitGroupedStartingMaterials } = this.state

        return (
            <div>
                <TabView>
                    {
                        Object.keys(splitGroupedStartingMaterials).map(k => (
                            <TabPanel header={'Family'}>
                                simple content here for testing
                            </TabPanel>
                        ))
                    } 
                </TabView>                              
            </div>);
        }
}

React component render dynamic content in tabs from a JSON object

1 Answers