0

I have a button and I need for the button to change a parent state value on click.

I know there are tons of questions like this but I swear I just can't understand it.

I have tried lifting the state up but I just can't get it right

home page button 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

parent state I want to change 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.log(this)
        return (
            <Fragment >
                <div className="ProductPage">
                    {modelo}
                </div>
            </Fragment>
        )
    }
}

export default ProductPage

When I click on the button located at the NinjaH2R component, I need it to change the state of the prop "toggle400" to true, located at the ProductPage component

Neeraj Sewani
  • 3,952
  • 6
  • 38
  • 55
Hernane Mitsuo
  • 13
  • 3

1 Answers1

1

The way to do it is by defining a call back function as a prop that is passed from the parent to the child component.

When you click a button in the child component, this callback function will be executed, and since it is in the parent, it can call setState that changes the state in the parent.

There are indeed many examples around on how to define such a callback. For example:

In your code, I believe that the following will work:

In ProductPage:

<NinjaH2R product={product} 
  callback={this.ninjaHandler}
  product={product}
/>

ninjaHandler = () => {
  this.setState({ toggle400: true });
}

In NinjaH2R:

<button onClick={this.props.callBack}>
  Ninja 400
</button>
Yossi
  • 5,577
  • 7
  • 41
  • 76
  • i have been trying to make it work for days, could you help me showing how to do it on my code? it's not lazyness or anything , i really can't understand it, thanks – Hernane Mitsuo Apr 07 '19 at 04:40
  • Just saw this.Still need help? – Yossi Apr 07 '19 at 16:16
  • could you explain this part please – Hernane Mitsuo Apr 07 '19 at 18:45
  • The parent component passes as a prop a function, that is set by the child component to be the button onClick handler. When the button is clicked, this function is called. Since it is within the parent's scope, it can set the state in the parent. – Yossi Apr 07 '19 at 19:57