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, Jan 20 '20 at 10:20
I don’t think you can return in a foreach. Try using map instead. — evolutionxbox, Jan 20 '20 at 10:21
@evolutionxbox the console.log line prints the key and value of the objects — Jay, Jan 20 '20 at 10:31
Try console logging the return of `Object.keys().forEach( ...` it will probably be undefined. [`forEach` has an `undefined` return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) — evolutionxbox, Jan 20 '20 at 10:36
Thanks Guys, seems React like only map instead of forEach. Now it works with map. — Jay, Jan 20 '20 at 13:58

NewVigilante · Accepted Answer · 2020-01-20T10:55:04.010

1

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>);
        }
}

edited Jan 20 '20 at 10:55

answered Jan 20 '20 at 10:44

NewVigilante

1,291
1
7
23

Thanks but that won't even compile and gave compile error. Failed to compile ./src/components/inorganic/custom-quote/InOrganicCreateCustomQuote.jsx Line 705: Expected an assignment or function call and instead saw an expression no-unused-expressions – Jay Jan 20 '20 at 10:53
Please try again now. I forgot ( ) after the arrow function inside map. – NewVigilante Jan 20 '20 at 10:55
1

Map is essentially the same as forEach, with the exception that you can return data. Returning data is needed to assemble the children for . – NewVigilante Jan 20 '20 at 14:13

React component render dynamic content in tabs from a JSON object

1 Answers1