propsって何？

propsとは

componentが持つ属性のこと
ex) props.name, props.age ある属性のデータに接続できる 配列、数値、文字列、関数など基本的に渡せる

const App = () => {
  return (
    <div>
      <User name={"taro"}/>
    </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name}</div>
}

複数の値もpropsを用いて渡せる.

const App = () => {
  return (
    <div>
      <User name={"taro"} age={10}/>
    </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name} ,and {props.age} years old.</div>
}

ちなみに、propsと記述しているのは、Properties（直訳すると所有物とか資産とか言う意味）の略称となっており分かりやすくするためその記述をしているが名前が違っていても動作する。

const App = () => {
  return (
    <div>
      <Test val={81}/>
    </div>
  )
}

const Test = (val) => {
  return <div>I reccive {val.num}.</div>
}

また、設定されていないpropsの値をデフォルトで決めることも可能

import React, {Component} from 'react';

const App = () => {
  const profiles = [
    { name:"Taro", age:10},
    { name:"Hanako", age:5},
    { name:"Noname", }
  ]
  return (
    <div>
      {
        profiles.map((profile, index) => {
          return <User name={profile.name} age={profile.age} key={index}/>
        })
      }
    </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name} ,and {props.age} years old.</div>
}

User.defaultProps = {
  age: 1
}

export default App;

まとめ

親から子に値を渡したいときに用いる。
子供は渡されたpropsを参照して値を描画することが可能