Nsryjdtyk

How i can add children elements into a parent list item element, with React?

I need insert elements after clicked user at list element, and insert inside this element.

import React from 'react';

import List from '@material-ui/core/List';

import ListItem from '@material-ui/core/ListItem';

import ListItemText from '@material-ui/core/ListItemText';





const ListOfSubcategories = (props) => {

    return (

        <List>

        {props.subcategories.map( category => {

            return (

                <ListItem key={category.id} button divider selected onClick={() => props.getCategories((category.id))}>

                    <ListItemText align="center">

                        {category.name}

                    </ListItemText>

         </ListItem>

            );

        })}

        </List>

    );

};



export default ListOfSubcategories;





import React, { Component } from 'react';

import Typography from '@material-ui/core/Typography';

import { postToServer, ERRORS } from '../../store/postToServer/postToServer';

import Button from '@material-ui/core/Button';

import ListOfCategories from '../../components/ListSubcategories/ListSubcategories';



class Categories extends Component {



state = {

    openSubcategories: false

};



categories = ;



getCategories = (idCategory) => {

    postToServer(URL.getCategories, { category_id: idCategory }, (res) => {

        if (parseInt(res.error) === ERRORS.NONE) {

            this.categories.push(res.data);

            this.setState({ openSubcategories: true });

        } else {

            this.props.showError(res.message);

        }

    });

};



componentDidMount() {

    postToServer(URL.getCategories, {}, (res) => {

        if (parseInt(res.error) === ERRORS.NONE) {

            this.categories = res.data;

            this.setState({ openSubcategories: true });

        } else {

            this.props.showError(res.message);

        }

    });

};



render() {

    return (

        <>

            <Typography>List of categories</Typography>

            <div>

                <ListOfCategories

                    subcategories={this.categories}

                    getCategories={this.getCategories}

                />

            </div>

        </>

    );

}

}



export default Categories;

I'd like add list of subcategories in my list categories, but inside level i don't know.
I have an array root categories, then user clicked, we need render root categories and subcategories inside clicked element.