【React.js】親から子コンポーネントへpropsで値を渡す

こういった声に答えていきます。

React.jsにおけるpropsの使い方については、Reactの公式チュートリアルのデータを Props 経由で渡すで学ぶことです。しかし、初学者にいきなりチュートリアルはきつい（私の実体験）ので、この記事では簡単な例を示しながら、私なりに説明していきます。

私は、React.jsを学び始めて10日の初心者で、自分の学習の復習としての意味もあり、今回のような記事を書きました。私のような初心者の方の参考になればと思います。

親から子コンポーネントへ値を渡す

まず、

• 親の関数コンポーネント（Parent）
• 子の関数コンポーネント（Child）

を定義します。

そして、Childコンポーネント内で変数childを定義します。Parentコンポーネント内に<Child />と書いて、子コンポーネントの内容を親コンポーネントに反映させます。

import React from 'react';
import './App.css';

function Child() {

  const child = "子"

  return (
    <div>
      <p>{child}</p>
    </div>
  )
}


function Parent() {

  return (
    <div>
      <Child />
    </div>
  );
}

export default Parent;

この時点では、以下のように表示されます。

* {
  text-align: center;
}

と、ここまで準備です。ここから本番です。

Parentコンポーネント内に、const parent = "親" を定義します。このparentをChildコンポーネントに渡してみます。<Child /> に以下のように書きます。

function Parent() {

  const parent = "親"

  return (
    <div>
      <Child 
        oya = {parent}
      />
    </div>
  );
}

そして、Childコンポーネントで propsを引数としてfunction Child(props)と書きます。そして、return内で、{props.oya}と書くことで、Parentコンポーネントのparentを表すことができます。

親のParentコンポーネントの<Child /> 内の oya = {parent} のoyaがpropsのアイテムのkeyになり、{parent} がpropsのアイテムのvalueになるイメージです。※ アイテムは{oya: parent}のような形をいいます。

props = {oya: parent}

なので、{props.oya}と書くことで、parentを表すことができます。

function Child(props) {

  const child = "子"

  return (
    <div>
　　　 <p>{props.oya}</p>
      <p>{child}</p>
    </div>
  )
}

そうすると、以下のように表示されます。

親のParentコンポーネントから子のChildに渡した{parent}を、Childコンポーネント内のreturn内で{props.oya}と書いて、parentをpropsによって渡し、親のParentコンポーネントの<Child />によって、「親」と表示させてます。

最後に、全コードを示します。

import React from 'react';
import './App.css';

function Child(props) {

  const child = "子"

  return (
    <div>
      <p>{props.oya}</p>
      <p>{child}</p>
    </div>
  )
}


function Parent() {

  const parent = "親"

  return (
    <div>
      <Child 
        oya = {parent}
      />
    </div>
  );
}

export default Parent;

親から子コンポーネントへ値を渡す方法はわかったけれど、子から親コンポーネントへ値を渡す方法についてはこちらの記事を読んでください。関連記事：【React.js】子から親コンポーネントへ値を渡す

 Tech Academy ：オンラインブートキャンプ無料説明会
DMM WEBCAMP ：未経験からIT業界へ転職なら【WebCampPRO】