React - How to modify a state of the parent component from the child?

Navigation
0

Let's say I have a parent component: 

import React from 'react';
import style from './style.less';

export default class Wrapper extends Component {

    this.state = {
         active: false
    }

    render() {
        return (
            <section className={style.wrapper}>
                <h2>{props.text}</h2>
                <div className={style.main}>
                     <Button isCentered={true} text="Precisa de alguma ajuda?" bgColor="#673ab7" color="white" />
                </div>
            </section>
        )
    }
);

export default Wrapper;

And a child component: 

import React from 'react';
import style from './style.less';

const Button = (props) => (
    <div class={style.button} style={{textAlign: '${props.isCentered ? "center" : "left"}'}}>
         <a onClick={console.log("Clicou!")} style={{backgroundColor: '${props.bgColor}', color: '${props.color}'}} class={style.a}>{props.text}</a>
    </div>
);

export default Button;

My App.js : 

import { react, Component } from 'react';
import Header from './Wraper';

export default class App extends Component {

    constructor() {
        super();
    }

    render() {
        return (
            <div id="app">
                <Wraper text="Lorem Ipsum" />
            </div>
        );
    }
}

How can I change the active state of component Wrapper to true the moment I click on the child component Button ?

    
asked by anonymous 26.01.2018 / 23:50

1 answer

0

You can use callbackParent() functions:

There are frameworks to deal with state management, such as Redux. But if the idea is not to add a new module in your project, you might be able to use callback functions:

You can pass as props to the child component a function that will call a method of its statefull class. 

import React from 'react';
import style from './style.less';

export default class App extends Component {

    this.state = {
        active: false
    }

    // Função chamada pelo callbackParent();
    onChildChanged(bool) {
        this.setState({active: bool});
    }

    render() {
        return (
            <section className={style.wrapper}>
                <h2>{props.text}</h2>
                <div className={style.main}>
                    <Button callbackParent={(bool) => onChildChanged(bool)} isCentered={true} text="Precisa de alguma ajuda?" bgColor="#673ab7" color="white" />
                </div>
            </section>
        )
    }
);

export default Wrapper;

Do not forget to call your function in onClick() of your child component: 

import React from 'react';
import style from './style.less';

const Button = (props) => (
    <div class={style.button} style={{textAlign: '${props.isCentered ? "center" : "left"}'}}>
         <a onClick={props.callbackParent(true))} style={{backgroundColor: '${props.bgColor}', color: '${props.color}'}} class={style.a}>{props.text}</a>
    </div>
 );

 export default Button;
    
26.01.2018 / 23:50
Writing codes with python 3 Three inputs within the same form. Can I do your actions without leaving the page (without refresh)?