Category List in React - reactjs

Question

I changed my NavBarDesktop to add props in super like below. My HomePage shows but if I click on About Us or any other page, I get a blank page. I also added my HomePage Code below as well. I am not sure why it does this. If I take const MyView our the pages work but there is no categories in NavDropdown.
NavMenuDesktop
class NavMenuDesktop extends React.Component{
constructor(props){
super(props);
}
render(){
const CatList = this.props.data;
const MyView = CatList.map((CatList,i)=>{
return <div key={i.toString()}>
<NavDropdown.Item href="">{CatList.category_name}</NavDropdown.Item>
</div>
});
return(
<Fragment>
<Navbar bg="light" expand="lg" sticky="top">
<Container>
<Navbar.Brand href="/"><img src={Logo} className="nav-logo" /></Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" className="nav-toggler" ><i className="fa fa-bars"></i></Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About Us</Nav.Link>
<NavDropdown title="Shop" id="basic-nav-dropdown" renderMenuOnMount={true}>
{MyView}
</NavDropdown>
<Nav.Link href="/contact">Contact</Nav.Link>
<NavDropdown title="My Account" id="collasible-nav-dropdown" renderMenuOnMount={true}>
<NavDropdown.Item href="/login"><i className="fa fa-sign-in-alt p-2 colorred"></i>Login</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2"><i className="fa fa-user-plus p-2 colorred"></i>Register</NavDropdown.Item>
</NavDropdown>
<ul className="inline justify-content-right">
<li><Nav.Link href="/favorites"><i className="fa fa-heart fa-md text-secondary"></i>
<sup><span className="badge text-white bgred fa-md">5</span></sup>
</Nav.Link></li>
<li><Nav.Link href="/cart"><i className="fa fa-shopping-cart fa-md text-secondary"></i>
<sup><span className="badge text-white bgred fa-md">5</span></sup>
</Nav.Link>
</li>
</ul>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Fragment>
)
}
}
export default NavMenuDesktop;
HomePage
import React, { Component, Fragment } from 'react';
import { Container } from 'react-bootstrap';
import AppURL from '../api/AppURL';
import AppRoute from '../route/AppRoute';
import FeaturedProducts from '../components/home/FeaturedProducts';
import Categories from '../components/home/Categories';
import Collection from '../components/home/Collection';
import NewArrival from '../components/home/NewArrival';
import HomeTop from '../components/home/HomeTop';
import NavMenuDesktop from '../components/common/NavMenuDesktop';
import FooterDesktop from '../components/common/FooterDesktop'
import axios from 'axios';
class HomePage extends Component {
constructor(){
super();
this.state ={
MenuData:[]
}
}
componentDidMount(){
window.scroll(0,0);
this.GetVisitorDetails();
axios.get(AppURL.CategoryInfo).then(response =>{
this.setState({MenuData:response.data});
}).catch(error=>{
});
}
GetVisitorDetails = ()=>{
axios.get(AppURL.VisitorDetails).then().catch()
}
render() {
return (
<Fragment>
<NavMenuDesktop data={this.state.MenuData}/>
<HomeTop />
<Container fluid={"true"}>
<Categories />
<NewArrival />
<FeaturedProducts />
<Collection />
<FooterDesktop/>
</Container>
</Fragment>
)
}
}
export default HomePage;

Answer 1

in constructor use super(props) then write the myView const in componentDidMount() function like this:
componentDidMount(){
const CatList = this.props.data;
const MyView = CatList.map((CatList,i)=>{
return <div key={i.toString()}>
<NavDropdown.Item href="">{CatList.category_name}</NavDropdown.Item>
</div>
});
window.scroll(0,0);
this.GetVisitorDetails();
axios.get(AppURL.CategoryInfo).then(response =>{
this.setState({MenuData:response.data});
}).catch(error=>{
});
}