5. props - Kite0301/react-my-app GitHub Wiki

前の章で作成した List コンポーネントを使用して、複数のタスクを表示できるようにしてみましょう。

↓ Main コンポーネント内

<div className='main'>
  <h1>タスク一覧</h1>
  <div className='tasks'>
    <List />
    <List />
  </div>
</div>

しかし、これでは「トイレ掃除」が2つ表示されてしまいます。

ここでは「タスクの種類だけコンポーネントを用意する」のではなく、「Listコンポーネント内の表示を変更できる」ようにしてみましょう。

コンポーネントを呼び出す（用いる）ときには、そのコンポーネントに情報を渡すことができます。
今回はそれぞれのListコンポーネントにtitleという名前の情報を渡してみましょう。
（この名前は自分で自由に決めることができます）

<div className='main'>
  <h1>タスク一覧</h1>
  <div className='tasks'>
    <List title='トイレ掃除' />
    <List title='ポチの散歩' />
  </div>
</div>

これで情報を「渡す」ことはできました。
次はコンポーネント側で情報を受け取り、表示してみましょう。

コンポーネントに渡した情報は this.props という値に入るようになっています。
title という名前をつけて渡したあたいは、this.props.title とすることで使用できます。

return (
  <div className='list'>
    <i className='far fa-circle' />
    {this.props.title}
  </div>
);

上記のように、トイレ掃除 と書かれていた部分を {this.props.title} に書き換えてください。
これで上からそれぞれ「トイレ掃除」「ポチの散歩」が表示されたかと思います。

なお、このようにJSX内でJavaScriptの変数などを用いる場合には コードを{}で囲む 必要があります。

この時点での「index.js」のコードは こちら から確認できます。

⚠️ **GitHub.com Fallback** ⚠️