PropTypes in functional stateless component

javascript reactjs react-props react-proptypes
Alan Jenshen picture Alan Jenshen · Jun 16, 2017 · Viewed 49.8k times · Source

Without using class, how do I use PropTypes in functional stateless component of react?

export const Header = (props) => (
   <div>hi</div>
)

Answer

Michael picture Michael · Jun 16, 2017

The official docs show how to do this with ES6 component classes, but the same applies for stateless functional components.

Firstly, npm install / yarn add the new prop-types package if you haven't already.

Then, add your propTypes (and defaultProps too if required) after the stateless functional component has been defined, before you export it.

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

const Header = ({ name }) => <div>hi {name}</div>;

Header.propTypes = {
  name: PropTypes.string
};

// Same approach for defaultProps too
Header.defaultProps = {
  name: "Alan"
};

export default Header;

Related questions

Access props inside quotes in React JSX

In JSX, how do you reference a value from props from inside a quoted attribute value? For example: <img className="image" src="images/{this.props.image}" /> The resulting HTML output is: <img class="image" src="images/{this.…

Read More
React - TypeError: Cannot read property 'props' of undefined

I'm trying to create a click event be able to delete an item on my list, but when I click it I get "TypeError: Cannot read property 'props' of undefined". I'm trying to stick to ES6 as much as possible, …

Read More
React propTypes component class?

How can I validate that the supplied prop is a component class (not instance)? e.g. export default class TimelineWithPicker extends React.PureComponent { static propTypes = { component: PropTypes.any, // <-- how can I validate that this is a component class (…

Read More