navigating with a component inside another component in React JS-CodePudding

this is the component ( legalbanner) that i put inside the other component called ( homepage). everytime i click on "sponsors or Legal" i get an error TypeError: this.props.onRouteChange is not a function

class Legalbanner extends Component {

moveToSponsors = () =>{ this.props.onRouteChange ('sponsors');}
moveToLegal = () =>{ this.props.onRouteChange ('legal');}



render() {
    return ( 

            <div>
                <Container className="bannerLegal">
                    <Row fluid="md">
                        <Col md={4}><p className="bottomBannerInfo">Copyright © 2021 Red Lodge FC Inc. All rights reserved. </p></Col>
                        <Col md={1}><p className="bottomBannerInfo" onClick={this.moveToSponsors}>Sponsors </p></Col>
                        <Col md={2}><p className="bottomBannerInfo" onClick={this.moveToLegal}> Terms and Conditions</p></Col>
                        <Col md={5}><p className="bottomBannerInfo">website created by Freelance web developer </p></Col>
                    </Row>
                </Container>
            </div>
        );
    }
}

export default Legalbanner;

code inside homepage

class Homepage extends Component {

moveToFixtures = () =>{ this.props.onRouteChange ('fixtures');}
moveToClubinfo = () =>{ this.props.onRouteChange ('clubinfo');}
moveToContact = () =>{ this.props.onRouteChange ('contact');}
moveToGallery = () =>{ this.props.onRouteChange ('gallery');}
moveToTheteam = () =>{ this.props.onRouteChange ('theteam');}

state = {
chartImageURI: ""
        }

render() {
        return (
            <div>
                <Row style={{height:'100%'}}>
                    <Col md className="clubInfoBox"  onClick={this.moveToClubinfo}> <p className="a">CLUB INFORMATION</p>  </Col>
                    <Col md className="clubInfoBox1"  onClick={this.moveToTheteam} ><p className="a">THE TEAM</p> </Col>
                    <Col md className="clubInfoBox"  onClick={this.moveToFixtures}><p className="a">MATCH FIXTURES</p></Col>
                </Row>
                    <Row style={{height:'90%'}}> 
                        <Col md={6} className="clubInfoBox1" style={{height:'40%'}} onClick={this.moveToGallery}><p className="a">GALLERY</p></Col>
                        <Col md={6} className="clubInfoBox"  style={{height:'50%'}} onClick={this.moveToContact}><p className="a">CLUB CONTACT DETAILS</p></Col>
                    </Row>

            <Sponsorbanner/>

            <Legalbanner/>
            
            </div>
        );
    }
}

export default Homepage;

i can navigate without a problem with this page .

As the website is set up as a one page application i use App for the routing.

import '../App.css';

class App extends React.Component { constructor (props){ super(props) this.state = {route: 'homepage'}

  }

  onRouteChange = (newRoute)=>{
  this.setState({route:newRoute});
  }

    moveToClubinfo = () =>{ this.onRouteChange ('clubinfo');}
    moveToFixtures = () =>{ this.onRouteChange ('fixtures');}
    moveToContact = () =>{ this.onRouteChange ('contact');}
    moveToHomepage = () =>{ this.onRouteChange ('homepage');}
    moveToSponsors = () =>{ this.onRouteChange ('sponsors');}
    moveToGallery = () =>{ this.onRouteChange ('gallery');}
    moveToTheteam = () =>{ this.onRouteChange ('theteam');}
    moveToLegal = () =>{ this.onRouteChange ('legal');}
    moveToLegalbanner = () =>{ this.onRouteChange ('legalbanner');}

    render() {

         const{route} = this.state;

         return (
              <div >

                    <Container  fluid className="topPage">
                    <Row>
                    <Col sm={1} md={1} lg={1} ><img src={require('../images/RedLodgeLogo.jpg').default} alt="" className="redlodgefclogo"/></Col>
                    <Col sm={1} md={1} lg={1}><img src={require('../images/redLodgeFootball.png').default} alt="" className="redlodgefc"/></Col>
                    <Col sm={10} md={10} lg={10}>
                    <Row sm={12}md={12} lg={12} className="TopRow"><p className="findUs" > find us on </p>
                    <SocialIcon url="https://www.facebook.com/RedLodgeYouthFC/" network="facebook" className="SocialMedia"  />
                    <SocialIcon url="https://twitter.com/LodgeUnder" network="twitter"  className="SocialMedia"/>
                    <SocialIcon url="https://www.instagram.com/redlodgeyouthfc/" network="instagram"  className="SocialMedia" />
                    </Row>
                    <Row sm={12}md={12} lg={12} className="bottomRow">
                    <p className="menuBand" onClick={this.moveToClubinfo}>Club Information</p>
                    <p className="menuBand" onClick={this.moveToTheteam}>The Team</p>
                    <p className="menuBand" onClick={this.moveToFixtures}>Match Fixtures</p>
                    <p className="menuBand" onClick={this.moveToGallery}>Gallery</p>
                    <p className="menuBand" onClick={this.moveToContact}>Club Contact Details</p>
                    <p className="menuBand" onClick={this.moveToHomepage}><BsFillHouseFill /></p>
                    </Row>
                    </Col>
                    </Row>
                    </Container>

{ route ==='homepage'? : } { route ==='fixtures'? : } { route ==='clubinfo'? : } { route ==='contact'? : } { route ==='sponsors'? : } { route ==='gallery'? : } { route ==='theteam'? : } { route ==='legal'? : }

{ route ==='legalbanner'? : }

              </div>    
          );
      }
  }

export default App;

CodePudding user response：

Legalbanner isn't being passed an onRouteChange prop in the Homepage component:

<Legalbanner />

You should also pass an onRouteChange props handler to the Legalbanner component.

<Legalbanner onRouteChange={this.props.onRouteChange} />