兄弟コンポーネントのstate連動をしたい

Question

やりたいこと

以下のようなコンポーネントがあり、子コンポーネントのstateを更新することで他の兄弟コンポーネントも連動させたい

• 親コンポーネント

import React, { useState } from "react";
import Child from "./Child"

function Parent(){
  const [childList, setChildList] = useState([]);

  return (
    <>
      {childList}
      <button onClick={addChild}>add</button>
    </>
  )

  function addChild(){
    // Childコンポーネントを追加していく処理
  }
}

• 子コンポーネント

import React, { useState } from "react";

function Child(){
  const [time, setTime] = useState();

  return (
    <p>{time}</p>
    <input type='time' value={time} onChange={changeTime}/>
  )

  function changeTime(e){
    setTime(e.target.value)
  }
}

例：

01:00
02:00
05:00

↓

02:00(1番上の時刻を02:00に変更)
03:00(連動して更新)
06:00(連動して更新)

質問

上記のように自身のstate更新で他のコンポーネントのstate更新するようなことはできるでしょうか

Answer 1

上記のように自身のstate更新で他のコンポーネントのstate更新するようなことはできるでしょうか

そんなことは考えず、親コンポーネントのstateにしましょう。

Comments

[tontonton123]

やはりそんなに都合良くいかないですかね・・・親にstate移行するようにします。
回答ありがとうございました。