【React】配列を繰り返し処理で回して props に渡してみる

はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

配列を繰り返し処理で回して props に渡してみる

defaultPropsを使ってpropsに値が入らなかった時のデフォルトも設定してみました。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

// User に入れる用のデータ
const profiles = [
  { name: '太郎', age: 10 },
  { age: 30 },
  { name: '花子', age: 25 },
  { name: '太郎' },
]

const User = (props) => {
  return (
    <p>私の名前は{props.name}で、年齢は{props.age}です。</p>
  )
};

// 値がなかった時のデフォルトを設定
User.defaultProps = {
  name: '名無し',
  age: 20
};

const Users = () => {
  return (
    <div>
      // map を使って profiles から User を繰り返し処理で出力
      {profiles.map((profile) => {
        return <User name={profile.name} age={profile.age}/>
      })}
    </div>
  )
};

ReactDOM.render(
    <Users />,
  document.getElementById('root')
);

表示成功