react兄弟間のデータの受け渡し

Question

前提・実現したいこと

親コンポーネント<Parent >から子のコンポーネント<ChildeOne >と<ChildeTwo >を
レンダリングしています。
<ChildeOne>のデータを<ChildeTwo>に渡したいです。

<Parent > ⇒ <ChildeOne >
では、文字と関数を渡しています

// <Parent >
  return (
      <ChileOne value={i} 
                onClick={() => this.handleClick(i)} 
      />);

// <ChildeOne >
export default function ChileOne(props) {
  return (
    <button onClick={props.onClick}>
      {props.value}
    </button>
  );
}

<Parent > ⇒ <ChileTwo >
で、ChildeOneのデータを表示したいのですがうまくいきません

// <Parent >
  handleClick(i) {
    console.log(i)
    return <ChildeTwo value={i} />;
  }

// <ChildeTwo >
export default class ChildeTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      output: "",
    };
  }
  render() {
    return (
      <div>
       <div>{this.state.output}</div>
      </div>
    );
  }
}

handleClick()内では期待している値が取得できているので
ChildeTwoで受け取れてないのだと思うのですがいまいちわかりません。

Answer 1

ParentのhandleClicke(i)内ではなく、render()の中で、ChildeTwoを定義する必要があります。

どのChileOneがクリックされたかをChildeTwoに表示しようとしているのであれば、
Parentに、clickedNumberのようなStateを追加して、handleClick(i)で、setStateすることで、表示されるようになると思います。

// <Parent >
  constructor(props) {
    super(props);
    this.state = {
      clickedNumber: 0,
    };
  }

  handleClick(i) {
    console.log(i)
    this.setState({clickedNumber: i});
  }

  return (
      <ChileOne value={i} 
                onClick={() => this.handleClick(i)} 
      />
      <ChildeTwo value={this.state.clickedNumber} />
  );

// <ChildeTwo >
export default class ChildeTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      output: "",
    };
  }
  render() {
    return (
      <div>
       <div>{this.state.output}</div>
       <div>{this.props.value}</div> //ParentでセットされたValueを表示
      </div>
    );
  }
}

Comments

[mrr]

回答ありがとうございます。データ受け渡しのイメージが湧きました！

現在、頂いた回答でいうところの
clickedNumber: 0
の部分が
clickedNumber1 :["0","1","2"],
clickedNumber2 :["3","4","5"],
clickedNumber3 :["6","7","8"],
になっているのですが
その場合、
handleClick(i) {
console.log(i)
this.setState({clickedNumber: i});
}
どのようにsetStateすればいいのでしょうか？

続けて質問申し訳ありません。

[Meganezaru]

clickedNumber1,2,3はすでにある、Stateということですか？

すでにあるものではなく、新しく追加していただければ、影響なく動作すると思います。

３つのコンポーネントのソースをもれなく乗せてもらえば、判断できるのですが・・・

[mrr]

おっしゃる通りで
clickedNumber1,2,3はすでにあるstateです
既にあるstateを子1のボタンに渡して、ボタンをクリックすると子2に表示したいです。
電卓のようなものを作成しています。

[Meganezaru]

今掲載されているソースにその部分がないので、判断できないのです(^_^;)
clickedNumber1,2,3は、現状何に利用されているのですか？

[mrr]

return (
<ChileOne value={i}
onClick={() => this.handleClick(i)}
/>);

ここで子1にvalueとして渡して子1のボタンで表示させています。

[Meganezaru]

clickedNumber1,2,3は、<ChlieOne />の表示に利用されているStateですよね？

<ChildeTwo />の表示で利用するために別のState（回答でのclikedNumber）を準備し、<ChileOne />クリック時にclickedNumberを更新するというのが、私の回答です。

<ChildeTwo />と、元からあったclickedNumber1,2,3は何も関係しません。

clickedNumber1,2,3と、＜ChileOne />に渡しているiは、どういう関係がありますか？

[mrr]

>> <ChildeTwo />の表示で利用するために別のState（回答でのclikedNumber）を準備し、<ChileOne >> />クリック時にclickedNumberを更新するというのが、私の回答です。
>>
>> <ChildeTwo />と、元からあったclickedNumber1,2,3は何も関係しません。

ここで、やっと理解できました！
お手数おかけして申し訳ありません。
ありがとうございます。助かりました。

[Meganezaru]

いえいえ、伝わってよかったです( ^ω^ )
おつかれさまでした！