defaultProps使い方

今回は、defaultPropsについてメモしていきたいと思います。

defaultPropsとは

propsを特に指定していなかった時見せる基本値を設定する変数です。

使い方

defaultPropsを設定

import React from "react";

const MyComponent = (prrps) => {
  return <div>my name is {prrps.name}</div>;
};

MyComponent.defaultProps = { // こちら
  name: "anveloper",
};

export default MyComponent;

• コメントに「こちら」となっているところがデフォルト値を設定しているところです。

呼び出しがわを見てみましょう

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

• propsのnameを渡していないです。

結果

• デフォルトの値（anveloper）が正常に表示されます。

以上でdefaultPropsの使い方についてみてみました。