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
Top comments (1)
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: