Reactで親→（子）→親に値を送るベストプラクティス

Question

実現したいこと

アトミックデザインという手法を知って、コンポーネントをAtom単位で分割しようと思いました。
クリック回数を表示する簡単なプログラムを、CounterとBtnコンポーネントに分割しました。そのコンポーネントをOrganismsクラスで呼び出しています。

問題点

buttonがクリックされた事を、BtnコンポーネントからCounterコンポーネントにどのように伝えるべきですか?

ソースコード

import React, { Component } from 'react';

import Counter from './atoms/Counter';
import Btn from './atoms/Btn';

export default class Organisms extends Component {
    render()
    {
        return(
            <>
                <Counter />
                <Btn />
            </>
        );
    }
}

import React, { Component } from 'react';

export default class Btn extends Component {
    render()
    {
        return(
            <button>Click!</button>
        );
    }
}

import React, { Component } from 'react';

export default class Counter extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            count: 0
        }
    }

    render() {
        return(
            <p>クリック数: {this.state.count}</p>
        );
    }
}

Comments

[hoshi-takanori]

そのカウンターが何を数え、どこで管理されるべきかによりますが、とりあえず Counter が状態を保つのはあまり良くないと思います。

[退会済みユーザー]

どれが値を管理するべきでしょうか？
確かReduxを使うと一括で管理できる。と聞きますが……

[hoshi-takanori]

そのカウンターが何を数えるかによります。

[退会済みユーザー]

ボタンがクリックされた回数を数えます

Answer 1

Organisms側から関数などを渡す。(最適かどうかは別として、最低限の動作はする)

import React, { Component } from 'react';

import Counter from './atoms/Counter';
import Btn from './atoms/Btn';

export default class Organisms extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            count: 0,
        }
    }

    handleClick() {
        this.setState({
            count: this.state.count + 1,
        })
    }

    render()
    {
        return(
            <>
                <Counter count={this.state.count} onClick={this.handleClick}/>
                <Btn text="Click!" onClick={this.handleClick}/>
            </>
        );
    }
}

import React, { Component } from 'react';

const Btn = (props) => {
    return(
        <button onClick={props.onClick}>{props.text}</button>
    );
}

export default Btn;

import React, { Component } from 'react';

const Counter = (props) => {
    return(
        <h3>{props.count}</h3>
    );
}

export default Counter;