Search code examples
reactjswarningsreact-proptypes

Prop-types don't recognize the prop called "spacing" as a boolean

This is the component call:

<Paper spacing>Hello</Paper>

And this is how Paper.js looks like:

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

const Paper = ({ children, ...props }) => (
  <div {...props}>
    {children}
  </div>
);

Paper.propTypes = {
  spacing: PropTypes.bool
};

export default Paper;

Apparently everything looks OK. But PropTypes give me a warning:

Warning: Received `true` for a non-boolean attribute `spacing`.

If you want to write it to the DOM, pass a string instead: spacing="true" or spacing={value.toString()}.
    in div (at Paper.js:5)
    in Paper (at src/index.js:9)
    in StrictMode (at src/index.js:8)

https://codesandbox.io/s/prop-types-warning-fnse0

Solution

  • The error has nothing to do with proptypes, but with the fact that you are passing a boolean attribute to markup.

    You are passing spacing attribute to the div, which does not accept a spacing attribute, it is warning that markup does not accept boolean values as their attribute values. Hence the error.