Как изменить состояние компонента, когда я нажимаю кнопку, которая находится на другом компоненте

У меня есть кнопка, и мне нужно, чтобы кнопка изменила значение родительского состояния при нажатии.

Я знаю, что таких вопросов куча, но клянусь, я просто не могу этого понять.

Я пытался поднять состояние, но я просто не могу понять это правильно

кнопка домашней страницы http://prntscr.com/n8jnlh

    import React, { Component,Fragment } from 'react'
    import App from '../App.css'
    import productPage from '../ProductPage'

    class NinjaH2R extends Component {
    render () {    
    return ( 
    <Fragment>
       <table> {/*lista de produtos */}
          <td className = "drop">
            <div className = "dropdown">
              <button className = "dropbtn">Motos ˅</button>
            <div className = "dropdown-content">
            <div>
               <button  /*onClick = {this.handleClick.bind(this)}*/ >Ninja 
               400</button>
            </div>
          </td>
        </table> 
    </Fragment>
        )
    }
}
export default NinjaH2R

родительское состояние, которое я хочу изменить http://prntscr.com/n8jo07

    import React, { Component,Fragment } from 'react'
    import Ninja400 from './components/Ninja400'
    import product from './productJSON';
    import App from './App.css'
    import NinjaZX6R from './components/NinjaZX6R';
    import Z900 from './components/Z900';
    import NinjaH2R from './components/NinjaH2R';
    import Toggle from './components/Toggle'
    class ProductPage extends Component {
    constructor(props){
        super(props)
        this.state = {
        toggle400: false,
        toggleZX6R: false,
        toggleZ900: false,
        toggleH2R: true,
        }
        let modelo
    }
    render () {
        let modelo=null
        if (this.state.toggle400===true){
            modelo=<Ninja400 product = {product}/>
            this.state.toggleZX6R = false
            this.state.toggleZ900 = false
            this.state.toggleH2R = false

        }
        if (this.state.toggleZX6R===true){
            modelo=<NinjaZX6R product = {product}/>
            this.state.toggle400 = false
            this.state.toggleZ900 = false
            this.state.toggleH2R = false
        }
        if (this.state.toggleZ900===true){
            modelo=<Z900 product = {product}/>
            this.state.toggleZX6R = false
            this.state.toggle400 = false
            this.state.toggleH2R = false
        }
        if (this.state.toggleH2R===true){
            modelo=<NinjaH2R product = {product}/>
            this.state.toggleZX6R = false
            this.state.toggleZ900 = false
            this.state.toggle400 = false
        }
        console.info(this)
        return (
            <Fragment >
                <div className = "ProductPage">
                    {modelo}
                </div>
            </Fragment>
        )
    }
}

export default ProductPage

Когда я нажимаю кнопку, расположенную в компоненте NinjaH2R, мне нужно, чтобы она изменила состояние реквизита «toggle400» на true, расположенного в компоненте ProductPage.