Parent and child relations in React - reactjs

Question

I'm having some issues with parsing refs to child classes using ReactJS
Here is my main class where all my refs are located :
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
<Title content="I am Tristan Vermeesch" />
<hr />
<Bio />
<Introduction ref={(Introduction) => { this.introref = Introduction; }} />
<Timeline ref={(Timeline) => { this.timelineref = Timeline }} />
<Projects ref={(Projects) => { this.projectsref = Projects }} />
<Skills ref={(Skills) => { this.skillsref = Skills }} />
<Certificates ref={(Certificates) => { this.certifref = Certificates }} />
<Download ref={(Download) => { this.downloadref = Download }} />
<Contact ref={(Contact) => { this.contactref = Contact }} />
</div>
);
}
}
I want that a Child component in my <Navbar /> retrieves the ref to make it scroll down using react-scroll-to-component. Here is my Navbar class :
class Navbar extends Component {
render() {
return (
<div className="navbar" >
<Route path="/textversion" component={TextVersion} />
<Navitem dName={"Text Version"} url={"textversion"} />
<Navitem dName={"Contact"} url={"contact"} />
<Navitem dName={"Resume"} url={"resume"} />
<Navitem dName={"Certificates"} url={"certificates"} />
<Navitem dName={"Skills"} url={"skills"} onClick={() => scrollToComponent(this.skillsref, { duration: 1600 })} />
<Navitem dName={"Projects"} url={"projects"} />
<Navitem dName={"Life"} url={"life"} />
<Navitem dName={"Me"} url={"me"} />
</div>
)
}
}
You can see the onclick function there, it works in the main class but how can I get all the refs from the parent class?

Answer 1

Try something like this:
You have to define this in your app class
introref =React.createRef()
timelineref = React.createRef()
projectsref = React.createRef()
skillsref = React.createRef()
certifref = React.createRef()
downloadref = React.createRef()
contactref = React.createRef()
and use like this:
<Introduction ref={this.introref} />
<Timeline ref={this.timelineref} />
<Projects ref={this.projectsref} />
<Skills ref={ this.skillsref} />
<Certificates ref={this.certifref} />
<Download ref={this.downloadref } />
<Contact ref={this.contactref} />
and yes you have to crate props in your NavBar:
<Navbar
introref={this.introref}
timelineref={this.timelineref}
projectsref={this.projectsref}
skillsref={this.skillsref}
certifref={this.certifref}
downloadref={this.downloadref }
contactref{this.contactref}
/>
And inside NavBar you have to use like this:
const { introref,timelineref,projectsref,skillsref,certifref,downloadref,contactref } = this.props
and you can us the ref like call
introref.current
timelineref.current
so in your code something like:
<Navitem dName={"Skills"} url={"skills"} onClick={() => scrollToComponent(skillsref.current, { duration: 1600 })} />
I hope it will work