React - propsで子コンポーネントに値を渡す

JavaScript React


Reactで子コンポーネントに値を渡すコードメモ。


propsは親コンポーネントから子コンポーネントへ値を渡す時に使い、変更不可な値(イミュータブル)。

＊対してstateはコンポーネント内の状態であり、変更可(ミュータブル)。

↓は、AppコンポーネントからUserコンポーネントに値を渡すコード

import React from 'react';

const App = () => {
  const profile = [
    { name: 'Tom', age: 23 },
    { name: 'Micke', age: 54},
    { name: 'Anon' }
  ];
  
  return (
    profile.map((p, index) => <User name={p.name} age={p.age} key={index} />)
    // => Tom is 23 years old
    // => Micke is 54 years old
    // => Anon is 0 years old
  );
}

const User = (props) => (
  <p>{props.name} is {props.age} years old</p>
)


export default App;


ちなみに、

mapで回す際にindexをkeyに指定するのがベストプラクティスのようです。