Unable to get sub categories in gatsby. Showing blank
Tags: help
Published: 2019-11-20 11:15:23

---
title: Unable to get sub categories in gatsby. Showing blank
published: true
tags: help
---

Hi I have tried to make categories and sub categories but unable to fetch the header menu sub categories items from gatsby grapql using StaticQuery. Tried so many times but getting blank items. I did console log the header menu and it shows array of repeating items.

Please help me out from this situation.


class SubCat extends React.Component{
    constructor(props){
        super(props);
        // console.log(props.data);
    }
    render(){
        return(
            <>
                        <div className="dropdown_content">
                            <ul className="catgry">
                            <li className="nav_submenu_item">
                                SHOP BY CATEGORIES
                            </li>
                            {this.props.data.map((value, index) => {
                                // console.log(value)
                                return(
                                <li className="nav_submenu_item" key={index}>
                                    <Link to={value.slug}>{value.name}</Link>
                                </li>
                                )
                            })
                        }
                            </ul>
                        </div>
              </>
        )
    }
}

class Header extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value: '',
            showSearchBar: false,
            showMenu: false
        };
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }


    handleHover = () => {
        this.setState( { showMenu: true });
    }

    handleLeave = () => {
        this.setState( { showMenu: false });
    }


    render() {
        return(
        <StaticQuery
            query={graphql`
            query{
                allMobileMenuData{
                edges{
                    node{
                    payload {
                        subcategory {
                        name
                        slug
                        }
                        collections {
                        name
                        slug
                        }
                        slug
                        name
                    }
                    }
                }
                }
            }
        `}
        render={data => (
                <>
                <div className="header-d">
                        <div className="header-link-logo-d">
                            <Link to="/" >
                                <Logo fill="#C0B394" width="100px" height="100px" />
                            </Link>
                        </div>
                            <ul className="header-right-section-d">
                            <li><a href="#" onClick={()=>this.onSclick()}>Search</a></li>
                                <li><a href="javascript:void(0)">Cart</a></li>
                            </ul>

                    <nav>
                        <ul className="main-menu-d">
                {
                data.allMobileMenuData.edges.map((data, index) => {
                    if(data.node.payload.subcategory !==''){
                    // console.log(data.node.payload.subcategory)
                    return (
                        <li className="nav_submenu_item" key={index} onMouseLeave={this.handleLeave}><a onMouseEnter={this.handleHover}><Link to={data.node.payload.slug}>{data.node.payload.name}</Link></a>
                            {
                                this.state.showMenu &&
                            <SubCat data={data.node.payload.subcategory}  />
                            }
                            </li>
                        )
                     }else{
                            return(
                                <>
                                </>
                            )
                        }
                }
                    )
                }
                </ul>
                    </nav>
                    </div>
                </>
                )
                }
            />
        )
    }
}

export default Header