問題一覧に戻る
初級状態管理
問題28: stateリフトアップ

共通の親コンポーネントでstateを管理し、兄弟コンポーネント間でデータを共有します。

import React, { useState } from 'react';

// 子コンポーネントA
function ChildA({ count,  }) {
  return <button onClick={onAdd}>A: +1</button>;
}

// 子コンポーネントB
function ChildB({  }) {
  return <p>B: {count}</p>;
}

// 親コンポーネント
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildA count={count} ={() => setCount(count + 1)} />
      <ChildB ={} />
    </div>
  );
}

export default Parent;
···