React - what should be the propType of Material UI icon

user_10686620 0
Viewed 1227

I am going to pass MUI icon to component Test and I want to create Protype for the icon, but I am not sure what should be the correct proptype of the icon

App.js

import "./styles.css";
import VisibilityIcon from "@material-ui/icons/Visibility";

import Test from "./Test";

export default function App() {
  return (
    <div className="App">
      <Test icon={<VisibilityIcon />} />
    </div>
  );
}

Test.jsx

import PropTypes from "prop-types";

function Test(props) {
  const { icon } = props;
  return (
    <div>
      Icon:
      {icon}
    </div>
  );
}

Test.propTypes = {
  // icon: ??????
};

export default Test;

https://codesandbox.io/s/intelligent-curie-8mtbw?file=/src/Test.jsx:0-213

material-ui reactjs javascript
2 Answers

It should be a PropTypes.element

Test.propTypes = {
  icon: PropTypes.element
};

Working Example:

Edit fervent-poitras-ubr96

user_51226150

I'd go with PropTypes.element here if you want to be specific.

Typechecking with PropTypes

Test.propTypes = {
  icon: PropTypes.element,
};

// A React element.
optionalElement: PropTypes.element,

If you want to be a little more loose/general, then use PropTypes.node for anything that is renderable.

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

Edit react-what-should-be-the-proptype-of-material-ui-icon

user_86908570
Related