React function parameters - Failed prop type: expected `boolean`

Question

I'm trying to call a Modal I made in another class. I simply want to pass a boolean parameter to open or close it.

Calling the modal:

<CourseModal show={true} />

Modal function:

export default function CourseModal(show) {
  return (
    <Modal open={show}>
        <ModalContent />
    </Modal>
  );
}

However when I do this, I get the following error:

Why does this happen? It says it expects a boolean, but it clearly is? Thanks in advance!

Are you using typescript for your project? – Jun 14 '20 at 15:54 — , Jun 14 '20 at 15:54

Dennis Vash · Accepted Answer · 2020-06-14T16:05:17.133

2

Currently, you pass the props object itself, you just named it show.

export default function CourseModal({ show }) {
  return (
    <Modal open={show}>
      ...
    </Modal>
  );
}

// You called it show instead of props
export default function CourseModal(props) {
  return (
    <Modal open={props.show}>
      ...
    </Modal>
  );
}

import PropTypes from 'prop-types';
const CourseModal = ({ show }) => {
  return (
    <Modal open={show}>
      ...
    </Modal>
  );
};

CourseModal.propTypes = {
  show: PropTypes.bool;
}

export default CourseModal;

Also, in JSX you don't have to pass true boolean, you can write:

// Same as show={true}
<CourseModal show />

edited Jun 14 '20 at 16:05

answered Jun 14 '20 at 15:30

Dennis Vash

50,196
9
100
118

Thanks for the suggestion, but sadly I'm still stuck with an error using your solution. https://i.gyazo.com/d40c3dba6ce075e1744fbefa7ee0194a.png – SJ19 Jun 14 '20 at 15:44
Same problem: https://i.gyazo.com/9c3985bd207b45b2ec4fd7b41e7027df.png – SJ19 Jun 14 '20 at 15:47
Its a warning, the code should work... Do you have `prop-types` installed?... I'll add it to an answer in case you do – Dennis Vash Jun 14 '20 at 16:03
See what prop-types means: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes – Dennis Vash Jun 14 '20 at 16:06
Woops, you're right it works. Thanks. Can I just ignore the warning then? – SJ19 Jun 14 '20 at 16:10
You can, see https://stackoverflow.com/questions/30948970/how-to-disable-eslint-react-prop-types-rule-in-a-file – Dennis Vash Jun 14 '20 at 16:29
Thank you. Marked your solution as answer. – SJ19 Jun 14 '20 at 16:48

React function parameters - Failed prop type: expected `boolean`

1 Answers1