【React】propsにデフォルト値を持たせる

propsを設定したコンポーネントをレンダリングする際に、デフォルトで値をもたせたいという場合があります。

そのような際には以下のようにdefaultPropsという設定を行いましょう。

import React from 'react';

const App = () => {
  const details = [
    {name: "Meow", age: 10},
    {name: "Hanada", age: 20},
    {} // 空欄のオブジェクトを渡す
  ]
  return (
    <div>
      {
        details.map((detail, index) => {
          return <Cat name={detail.name} age={detail.age} key={index}/>
        })
      }
    </div>
  )
}

const Cat = (props) => {
  return <div>My name is {props.name}.My age is {props.age}</div>
}

// 設定したCatコンポーネントにdefaultPropsを設定する
Cat.defaultProps = {
  name: "Nanashi",
  age: 0
}

export default App;