Unable to get sub categories in gatsby. Showing blank

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(
<>

• SHOP BY CATEGORIES
{this.props.data.map((value, index) => { // console.log(value) return(
• {value.name}
) }) }

</>
)
}
}

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

Comments

[Suzanne Aitchison]

Hey, can you format your code blocks? It's kind of hard to see what's going on otherwise and I think it will help you get help with this issue!

You just need to surround each code snippet with backticks eg:

```
Code goes here
```