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

Question

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;

Man 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 state active Component Wrapper for true the moment I click on the child component Button?

Answer 1

You can use functions of callbackParent():

There are frameworks to handle state management, such as Redux. But if the idea isn’t to add a new module to your project, maybe you can use callback functions:

You can pass as props for the child component a function that will call a method from 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;

Don’t forget to call your function on 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;