new one

----------------------------------------------------------------------------------------------------
context.js
import React, {useState, useEffect} from 'react';

const ProductContext = React.createContext();
const ProductConsumer = ProductContext.Consumer

export {ProductConsumer}



export function ProductProvider(props){
    // Responsible for holding all the data that goes into the Navbar
    const [entryStore, setEntryStore] = useState(null);
    // Responsible for opening and closing the sub container
    const [subContainer, setSubContainer] = useState(false);
    //Responsible for storing the subContainers children
    const [subContainerChildren, setSubContainerChildren] = useState([]);

    useEffect(() => {
        fetch("http://127.0.0.1:8000/sidebar/").then(data => data.json()).then(response => {
            setEntryStore(response)
        })
    }, []);

    const value = {
        entryStore,
        setEntryStore,
        subContainerChildren,
        setSubContainerChildren,
        subContainer,
        setSubContainer
    }
    return(
        <ProductContext.Provider value={value}>
            {props.children}
        </ProductContext.Provider>
    )
}

export default ProductContext;
----------------------------------------------------------------------------------------------------
subContainer.js
import React from 'react'
import ProductContext from '../Context/ProductContext'
import {useContext} from 'react'
import SideNavRow from './SideNavRow'

function SubContainer(props) {
     const {subContainerChildren, setSubContainer} = useContext(ProductContext)

    return (
    <div className="sub-container" style={props.state === "entering" ? {animation: "moveSubContainer .3s forwards"} :
        props.state === "entered" ? {transform: "translateX(0px)"} : {animation: "moveSubContainer .3s reverse backwards"}}>
        <div className="sub-header" onClick={() => setSubContainer(false)} >
           <i className="fas fa-chevron-left"></i> MAIN MENU
        </div>
          {subContainerChildren.map((subEntry => (
              <>
              <SideNavRow text={subEntry.title} />
              </>
          )))}

        <div style={{minHeight:"60px"}}></div>
    </div>
    );
}
export default SubContainer;
------------------------------------------------------------------------------------------------------
SideNavRow.js

------import React from 'react';
import ProductContext from '../Context/ProductContext'
import {useContext} from 'react'


function SideNavRow(props) {
    const {setSubContainer, setSubContainerChildren} = useContext(ProductContext)
    console.log(setSubContainerChildren)


    const openRow = () => {
        setSubContainer(true);
        setSubContainerChildren(props.children);
    }

    return (
        <div className="sidenavRow" onClick={() => (openRow())}>
              <div>{props.text}</div>
              <i className="fas fa-chevron-right"></i>
        </div>
    )
}
export default SideNavRow;
--------------------------------------------------------------------------------------------------
json
[
    {
        "id": 3,
        "title": "GIFTS BY CATEGORY",
        "parent": null,
        "type": 3,
        "children": [
            {
                "id": 20,
                "title": "Funny",
                "parent": 3,
                "type": null,
                "children": []
            },
            {
                "id": 18,
                "title": "Gamers",
                "parent": 3,
                "type": null,
                "children": []
            },
            {
                "id": 19,
                "title": "Geek",
                "parent": 3,
                "type": null,
                "children": []
            },
            {
                "id": 21,
                "title": "Pranks",
                "parent": 3,
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": 2,
        "title": "GIFTS BY OCCASSION",
        "parent": null,
        "type": 4,
        "children": [
            {
                "id": 15,
                "title": "Bridesmaids",
                "parent": 2,
                "type": null,
                "children": []
            },
            {
                "id": 14,
                "title": "Graduation",
                "parent": 2,
                "type": null,
                "children": []
            },
            {
                "id": 16,
                "title": "Groomsmen",
                "parent": 2,
                "type": null,
                "children": []
            },
            {
                "id": 17,
                "title": "Wedding",
                "parent": 2,
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": 1,
        "title": "GIFTS BY RECIPIENT",
        "parent": null,
        "type": 5,
        "children": [
            {
                "id": 10,
                "title": "Dad",
                "parent": 1,
                "type": null,
                "children": []
            },
            {
                "id": 9,
                "title": "Men",
                "parent": 1,
                "type": null,
                "children": []
            },
            {
                "id": 12,
                "title": "Mom",
                "parent": 1,
                "type": null,
                "children": []
            },
            {
                "id": 11,
                "title": "Women",
                "parent": 1,
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": 22,
        "title": "Help & Settings",
        "parent": null,
        "type": 6,
        "children": [
            {
                "id": 24,
                "title": "Customer Service",
                "parent": 22,
                "type": 8,
                "children": []
            },
            {
                "id": 23,
                "title": "Your Account",
                "parent": 22,
                "type": 7,
                "children": []
            }
        ]
    },
    {
        "id": 4,
        "title": "MORE CATEGORIES",
        "parent": null,
        "type": 2,
        "children": [
            {
                "id": 13,
                "title": "All Gift Guides",
                "parent": 4,
                "type": null,
                "children": []
            },
            {
                "id": 7,
                "title": "Contact Us",
                "parent": 4,
                "type": null,
                "children": []
            },
            {
                "id": 8,
                "title": "Random",
                "parent": 4,
                "type": null,
                "children": []
            },
            {
                "id": 6,
                "title": "Submit a product",
                "parent": 4,
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": 5,
        "title": "WHAT'S NEW",
        "parent": null,
        "type": 1,
        "children": []
    }
]