How to render an complex object in accordion react-native

Question

i have a complex object like this :

 {
  "hot foods": [
    {
      "name": "something",
      "ingredients": "something",
      "price": 13
    },
    {
      "name": "something",
      "ingredients": "something",
      "price": 13
    }
  ],
  "cold drinks": [
    {
      "name": "something",
      "ingredients": "something",
      "price": 13
    },
    {
      "name": "something",
      "ingredients": "something",
      "price": 13
    }
  ]
}

And i want to render this in a Collaseable component which is from here : https://www.npmjs.com/package/accordion-collapse-react-native
I want it to render "hot foods" , " cold drinks" in CollapseHeader component and in CollapseBody component i want to render those object array one by one.
But ı couldn't figure it out because i am not so good at javascript and it's not my core language.I just need to render it that way in a react native application.
Any help or idea will be preciated , I couldnt find any example which does exactly the same on the internet.


Here let me show you the function that i am trying:

  {
        Object.keys(this.state.menuArr).map((category,index)=>{
          return (
              <Collapse>
                <CollapseHeader>
                    <View>
                    <TouchableOpacity onPress={()=>{}} style={styles.waitressbutton}>
                      <Text> {category} {console.log(category)}</Text>
                    </TouchableOpacity>
                    </View>
                </CollapseHeader>
                {
                   this.state.menuArr[category].map((item,index)=>{
                    return(
                        <CollapseBody>
                        <Text>Ta daa!</Text>
                        <TouchableOpacity key={index} style={styles.addbutton} onPress={
                        }>
                        <Text key={Math.floor(Math.random() * 10000) + 1}> <Icon name='plus' color='#d7263d'/> {item} </Text>
                        </TouchableOpacity>
                        </CollapseBody>
                    );
                  }
                )
               }
               </Collapse>
            )
         }
       )
    }

And my object is exactly same as i wrote above.This function renders only category names but not the inside of CollapseBody part.

Answer 1

A better approach would be passing your data as an array and use the object to assign property. This way you can also use FlatList or SectionList directly from react-native. But as you specified the library you want to use, so here is the sample code for that:

import React, { Component } from 'react';
import{ View, Text, StyleSheet } from 'react-native';
import { AccordionList } from "accordion-collapse-react-native";

export default class App extends React.Component {
  state = {
    data : [
      {
        title: 'hot food',
        data: [
          {
            "name": "something food",
            "ingredients": "something",
            "price": 13
          },
          {
            "name": "something food 2",
            "ingredients": "something",
            "price": 13
          }
        ]
      },
      {
        title: 'hot food',
        data: [
          {
            "name": "something food",
            "ingredients": "something",
            "price": 13
          },
          {
            "name": "something food 2",
            "ingredients": "something",
            "price": 13
          }
        ]
      },
    ],
  }

  renderHead = (item) => {
    return(
        <Text style={{ fontSize: 18, fontWeight: '600' }}>
          {item.title}
        </Text>
    );
  }

  renderBody = (item) => {
    return (
      <View style={{padding:10, backgroundColor: '#e3e3e3'}}>
        {item.data.map(something => (
          <Text>{something.name}</Text>
        ))}
      </View>
    );
  }

  render() {
    const { data } = this.state;
    return (
      <View style={styles.container}>
        <AccordionList
            list={data}
            header={this.renderHead}
            body={this.renderBody}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,    
  },
});

Visit this link to view snack: https://snack.expo.io/@iamshadmirza/556cf0