React Native, Display Sub Categories list from JSON if Main Category clicked

Question

I have this code built with React Native which works fine -Check DEMO here-, I like to add to it the ability to display the list of sub-cats if the the main-cat has been clicked (Retrieve the Sub-cats list from JSON in State) and to display the Sub-cats in View area as list text.

    main-cat: Burger
          sub-cat: Vegi
                   Turky

how to achieve this?

import React, { useState } from 'react';
import {
Text,
View,
StyleSheet,
Button,
} from 'react-native';

export default class J extends React.Component {
constructor() {
    super();
    this.state = {
        id: '1',
        name: 'Breakfast',
        category: [
            {
                id: '1',
                name: 'Burger',
                items: [
                    { id: '1', name: 'Vegi' },
                    { id: '2', name: 'Turkey' },
                ],
            },
            {
                id: '2',
                name: 'Egg',
                items: [
                    { id: '1', name: 'Omelete' },
                    { id: '2', name: 'Scrambled' },
                ],
            },
            {
                id: '3',
                name: 'Wrap',
                items: [
                    { id: '1', name: 'palin' },
                    { id: '2', name: 'Choco' },
                ],
            },
            {
                id: '4',
                name: 'Club',
                items: [
                    { id: '1', name: 'Mixed' },
                    { id: '2', name: 'Olive' },
                ],
            },
        ],
    };
}

itemList = () => {
    {
        this.state.category.map((item) => (
            <View>
                <Text>{item.name}</Text>
                {item.items.map((sub) => (
                    <Text style={styles.subItem}>{sub.name}</Text>
                ))}
            </View>
        ));
    }
};
render() {
    return (
        <View>
            <ScrollView>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    {this.state.category.map((catname, index) => (
                        <View key={catname.id}>
                            <Button
                                title={catname.name}
                                onPress={() => this.itemList()}
                                color="#606070"
                            />
                        </View>
                    ))}
                </View>
            </ScrollView>
        </View>

    );
}
}
const styles = StyleSheet.create({});

Answer 1

You can show a list with the state: create an array state for items

constructor() {
    super();
    this.state = {
     ...
      itemList:[],
    };
  }

and show like this

...
 render() {
    return (
      <ScrollView>
       <View style={{flex:1}}>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          {this.state.category.map((catname, index) => (
            <View key={catname.id}>
              <Button
                title={catname.name}
                onPress={ () => this.setState({itemList:catname.items}) } //setstate in items
                color="#606070"
              />
            </View>
          ))}
          </View>
           { //use map in render for showing list of items
        this.state.itemList.map((item) => (
            <View style={{margin:5}}>
                <Text>{item.name}</Text>
            </View>
        ))
    }
        </View>
      </ScrollView>
    );
  }
}