【React】... is missing in props validation の対処法

概要

• propsが適切に検証されていないときにESLintからこの警告が表示されます
• 要は、子コンポーネントにpropsで渡すものの認識を合わせるための警告です

対処法

原因療法 or 対処療法

• 今回は原因療法の解説になります
• 対処療法はこちらが参考になるかと思います
• どちらを選択するのがベストかは状況に応じて判断してください

対処法

• 親からonClickBtnを渡す想定で

App.jsx

function App() {

  const onClickBtn = () =>{
    console.log("clicked")
  }

  return (
    <>
      <div className="App">
        <Sidebar onAddNote={onClickBtn}/>
      </div>
    </>
  )
}

• 子がそれを受け取る時に
• 「PropTypes.func.isRequired」を明示して関数型であり、かつ必須であることを保証しています

Sidebar.jsx

// importする
import PropTypes from 'prop-types';

const Sidebar = ({ onClickBtn }) => {
  return (
    <button　onClick={onAddNote}>
    {/* 省略 */}
  );
};
  
// これを記述
Sidebar.propTypes = {
  onClickBtn: PropTypes.func.isRequired,
};