缺少道具验证（道具类型）

Question

I'm trying to transfer my code below from a project to another project (CoreUI) that has .eslintrc and .prettier rules. Anyway, doing that (transferring code) gets me a couple of errors that i dont know how to fix them. Please help.

Note : I found this question but i dont know how to use the solution to fix this issue.

---

Errors:

  Line 13:11:  'notify' is missing in props validation          react/prop-types
  Line 13:19:  'setNotify' is missing in props validation       react/prop-types
  Line 26:20:  'notify.isOpen' is missing in props validation   react/prop-types
  Line 31:31:  'notify.type' is missing in props validation     react/prop-types
  Line 32:17:  'notify.message' is missing in props validation  react/prop-types

The Code:

import { Snackbar } from '@mui/material'
import React from 'react'
import { Alert } from '@material-ui/lab'
import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
  root: {
    top: theme.spacing(8),
  },
}))

export default function Notification(props) {
  const { notify, setNotify } = props
  const classes = useStyles()

  const handleClose = (event, reason) => {
    setNotify({
      ...notify,
      isOpen: false,
    })
  }

  return (
    <Snackbar
      className={classes.root}
      open={notify.isOpen}
      autoHideDuration={3000}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      onClose={handleClose}
    >
      <Alert severity={notify.type} onClose={handleClose}>
        {notify.message}
      </Alert>
    </Snackbar>
  )
}

.eslintrc.js Code:

module.exports = {
  // parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['react', 'react-hooks'],
  rules: {  },
}

Answer 1

In your.eslintrc file, add a rule to disable the props type validation

rules: { "react/prop-types": 0 }

Or add prop type validation for your component

import PropTypes from 'prop-types';

//...
Notification.propTypes = {
    notify: PropTypes.shape({
        message: PropTypes.string,
        type: PropTypes.string,
        isOpen: PropTypes.bool
    }),
    setNotify: PropTypes.func
};