Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Missing in props validation (props-types)

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  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: {  },
}

>Solution :

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
};
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading