React - send function to child via stateless component - reactjs

Question

I can send a function down to a class component with no problem. But when I want to pass down a function to a stateless component, and from there to a class component, something goes wrong.
It says "this.props.getProduct is not a function" , so I guess some binding thing has to be added, but I already did that in the top component.
The top component is like this:
class App extends Component {
constructor(){
super()
this.state = {
product: {}
}
this.getProduct = this.getProduct.bind(this)
}
getProduct(productId){
const result = productlist.products.filter(obj => {
return obj.id === productId;
})
this.setState({
product: result[0]
})
}
render() {
const {product} = this.state
return (
<div className="App">
<BrowserRouter>
<div>
<Route path="/" render={props =>
<Main
getProduct = {this.getProduct}
product = {this.state.product}
{...props}
/>}
/>
</div>
</BrowserRouter>
</div>
)
}
}
Here is "Main", the intermediate stateless component
const Main = (props) =>
<Route path="/products/:product" render={ props =>
<Product
getProduct={props.getProduct}
product={props.product}
{...props}
/>}
/>
"Product" component where the error occurs
class Product extends Component {
constructor(props) {
super(props)
this.state = {
}
}
componentDidMount() {
this.props.getProduct(this.props.match.params.product) // "not a function"
}
I suspect there is some kind of extra binding that needs to be done, but how?
Here is a sandbox where you can see the problem:
codesandbox

Answer 1

You have a collision here:
const Main = (props) =>
<Route path="/products/:product" render={ props =>
<Product
getProduct={props.getProduct}
product={props.product}
{...props}
/>}
/>
props from Main and props in render, so when you are passing in props from it takes props from the render function you passed instead of props from Main. You have to rename one, or replace const Main = (props) with const Main = ({ getProduct, product}) and then pass it to

Answer 2

The route render function props argument is shadowing the Main component's props variable. Better change variable name of render argument
const Main = (props) =>
<Route path="/products/:product" render={ p =>
<Product
getProduct={props.getProduct}
product={props.product}
{...props}
/>}
/>

Answer 3

This should do the job:
class App extends Component {
constructor() {
super()
this.state = {
product: {},
}
this.getProduct = this.getProduct.bind(this)
}
getProduct(productId) {
const result = productlist.products.filter(obj => {
return obj.id === productId
})
this.setState({
product: result[0],
})
}
render() {
const { product } = this.state
return (
<div className="App">
<BrowserRouter>
<div>
<Route
path="/products/:product" render={props =>
<Product
getProduct={props.getProduct}
product={props.product}
{...props}
/>}
/>
</div>
</BrowserRouter>
</div>
)
}
}