前提・実現したいこと
親コンポーネント<Parent >から子のコンポーネント<ChildeOne >と<ChildeTwo >を
レンダリングしています。
<ChildeOne>のデータを<ChildeTwo>に渡したいです。
<Parent > ⇒ <ChildeOne >
では、文字と関数を渡しています
javascript
1// <Parent > 2 return ( 3 <ChileOne value={i} 4 onClick={() => this.handleClick(i)} 5 />);
javascript
1// <ChildeOne > 2export default function ChileOne(props) { 3 return ( 4 <button onClick={props.onClick}> 5 {props.value} 6 </button> 7 ); 8}
<Parent > ⇒ <ChileTwo >
で、ChildeOneのデータを表示したいのですがうまくいきません
javascript
1// <Parent > 2 handleClick(i) { 3 console.log(i) 4 return <ChildeTwo value={i} />; 5 }
javascript
1// <ChildeTwo > 2export default class ChildeTwo extends React.Component { 3 constructor(props) { 4 super(props); 5 this.state = { 6 output: "", 7 }; 8 } 9 render() { 10 return ( 11 <div> 12 <div>{this.state.output}</div> 13 </div> 14 ); 15 } 16}
handleClick()内では期待している値が取得できているので
ChildeTwoで受け取れてないのだと思うのですがいまいちわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/31 03:53
2018/08/31 04:15
2018/08/31 04:23
2018/08/31 04:31
2018/08/31 04:39
2018/08/31 05:00
2018/08/31 05:13
2018/08/31 05:37