how to send data to an independent component in react js - reactjs

Question

Hello i am new in react js.
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import ProductComponent from './Product/productComponent';
import Navbar from './component/NavBar';
import ProductAction from './component/ProductAction';
class App extends Component {
state = { }
render() {
return (
<React.Fragment>
<Navbar />
<main className="container">
<Switch>
<Route path="/product" exact component={ProductComponent}/>
<Route path="/product-action" exact component={ProductAction}/>
</Switch>
</main>
</React.Fragment>
);
}
}
export default App
This is my app component. Here i have used a NavBar component to distribute links and in route i have used ProductComponent component but ProductComponent is not a child of app component or it may be i don't know. My question is how can i send data to NavBar component from ProductComponent component.
Here is my Navbar component.
import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom';
class NavBar extends Component {
render() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<NavLink className="nav-link" to="/product">
Product
</NavLink>
</li>
<li class="nav-item">
<NavLink className="nav-link" to="/product-action">
Product action
</NavLink>
</li>
</ul>
</div>
</nav>
);
}
}
export default NavBar;

Answer 1

You can use the React useContext hook to share data between two components
You should check the example from this documentation.
Or the example from this tutorial.

Answer 2

We can declare all properties and function of ProductComponent component to App component.
Then passes those to ProductComponent via props. Instead of using
<Route path="/product" exact component={ProductComponent}/>
We should use
<Route
path="/product"
render={
props => <ProductComponent products = {this.state.products}/>
}
/>
Since ProductComponent and NavBar component are child of App component we can easily passes all data of ProductComponent to NavBar component via props.