eslint react/prop-types の対応

やりたい事

• eslint-config-airbnbに準拠したReactコンポーネントの実装

How to build a movie search app using React Hooksからコードを引用

import React from "react";

const Header = (props) => {
  return (
    <header className="App-header">
      <h2>{props.text}</h2>
    </header>
  );
};

export default Header;

上記のコードは下記のエラーが発生する。

'text' is missing in props validation

これはpropsにtextが存在するか検証されていないため発生している。 そのため、propTypesでtextの型チェックを行う。

参考 PropTypes を用いた型チェック

PropTypesによる型チェック

import React from 'react';
+import PropTypes from 'prop-types';

const Header = (props) => (
  <header className="App-header">
    <h2>{props.text}</h2>
  </header>
);

+Header.propTypes = {
+  text: PropTypes.string,
+};

export default Header;

PropTypesによる型チェックを追加すると、下記2件のエラーが発生する。

Must use destructuring props assignment eslint(react/destructuring-assignment)
propType \"text\" is not required, but has no corresponding defaultProps declaration. eslint(react/require-default-props)

react/destructuring-assignmentは直接プロパティにアクセスしているために発生しているエラー（破壊的割り当て） react/require-default-propsは必須ではないプロパティが初期値不明のため発生しているエラー。

そのため、ES6の分割代入でプロパティの値を取り出して、初期値を設定する必要がある。

参考 MDN分割代入

分割代入でプロパティの変数を取り出す

import React from 'react';
import PropTypes from 'prop-types';

+const Header = (props) => {
+  const { text } = props;
+
+  return (
    <header className="App-header">
+      <h2>{text}</h2>
    </header>
+  );
+};

Header.propTypes = {
  text: PropTypes.string,
};

export default Header;

プロパティの初期値を設定

import React from 'react';
import PropTypes from 'prop-types';

const Header = (props) => {
  const { text } = props;

  return (
    <header className="App-header">
      <h2>{text}</h2>
    </header>
  );
};

Header.propTypes = {
  text: PropTypes.string,
};

+Header.defaultProps = {
+  text: 'default text',
+};

export default Header;

以上でエラーが消えて、プロパティの値が安全になったコンポーネントが完成