React-親から子に値を渡す方法【関数コンポーネント】

Propsって?

• 親コンポーネントから渡されたプロパティ（値）
• 直接外部のStateに接続する場合にはPropsで受け取る
• 不変のデータ
• 変更不可
• 親から渡される

Props は、一般的に、親コンポーネントから子コンポーネントに渡される値。

記述方法

今回説明するページの構造

OyaComponent.jsx
 - ChildComponent.jsx

親Componentに値を管理するStateがある。
そのStateの値を子Componentで表示させる。

では早速。

親Component

OyaComponent.jsx

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";

function OyaComponent (props) {

const [allData, SetAllData] = useState({
    nickname: "値１",
    txtData:"値2"
  });

  return (
    <ChildComponent data={allData}/>
  )
}

子Component

ChildComponent.jsx

import React from 'react';

function ChildComponent(props) {
  return (
    //それぞれに値1,値２が表示される
    <p>{props.data.nickname}</p>
    <p>{props.data.txtData}</p>
  )
}

渡された値の確認方法

consol.log(props);