How do I get children component's node / ref?

Question

So I have my App.js where I render all the components used to build the UI like this:

export default class App extends Component {
  render() {
    return (
      <div>
        <Header id='header' title="Nice title"/>
        <WelcomeScreen id='welcomeScreen'/>
        <Menu id='meniu'/>
      </div>
    );
  }
}

I want to implement a scroll spy but I need to access the nav nodes from the Header component into the App.js. I tried setting a ref to the specific node in the Header like this:

<NavItem ref={(ref) => { this.homeScreen = ref; }}>
    <NavLink href='#welcomeScreen'>Despre noi</NavLink>
</NavItem>
<NavItem ref={(ref) => { this.menuScreen = ref; }}>
    <NavLink href='#meniu'>Meniu</NavLink>
</NavItem>

But I don't know how do I use that ref in order to put them in the scroll spy.

Answer 1

You need to set a unique ref

<NavItem ref="homeScreen"><Component /><NavItem />

no need for a function