project/shop/src/components/catalog.js

import { Provider, connect } from 'react-redux';
import { useEffect, useState } from 'react'
import { Header, Footer, MainImg, Links } from "./index"
import thunk from 'redux-thunk';
import { bindActionCreators } from 'redux';
import actionCatalogCard from './../reducers/reducerCat';


const CatalogSubLink = ({name, arr}) => {
    const [show, changeValue] = useState(false);
    return(
        <li><span  onClick = {() =>changeValue(!show)}>{name} </span>{<ul className="subCatalog">{ show && arr.map(key =>
            <Links className = {"subLink"} key={`${key._id}${Math.random()}`} url={`/catalog/` + key._id} text={key.name}> </Links>)}</ul>}</li>

    )
}


const Catalog = ({ state, categories = [], getData = () => console.log("no") }) => {
    useEffect(() => categories.length == 0 && getData(), []);


    return (
        
            <ul className="catalog">
                {categories.map(category =>
                
                    category.subCategories == null ?
                    
                        <Links key={`${category._id}${Math.random()}`} url={`/catalog/` + category._id} text={category.name}> </Links> :

                         <CatalogSubLink name = {category.name} key = {`${category.subCategories._id}${Math.random()}`}arr = {category.subCategories}/>



                )}
            </ul>
        
    )
}

const getCategories = state => {
    // console.log("state", state)
    if (state.promiseRed.categories && state.promiseRed.categories.payload) {
        return state.promiseRed.categories.payload.data.CategoryFind
    }

    return [];
};

const mapStateToProps = state => ({
    state: state,
    categories: getCategories(state)
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionCatalogCard
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(Catalog);