React: PropTypes in stateless functional component

reactjs react-proptypes
Sven picture Sven · Jul 30, 2017 · Viewed 41.1k times · Source

In React, I wrote a stateless functional component and now want to add Prop Type validation to it.

List component:

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

function List(props) {
  const todos = props.todos.map((todo, index) => (<li key={index}>{todo}</li>));
  return (<ul></ul>);
}

List.PropTypes = {
  todos: PropTypes.array.isRequired,
};

export default List;

App component, rendering List:

import React from 'react';
import List from './List';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: '',
    };
  }

  render() {
    return (<List todos={this.state.todos} />);
  }
}

export default App;

As you can see in App, I am passing this.state.todos to List. Since this.state.todos is a string, I expected Prop Type validation to kick in. Instead, I get an error in the browser console because strings don't have a method called map.

Why is the Prop Type validation not working as expected? Takin a look at this question, the case seems identical.

Answer

Bhargav Ponnapalli picture Bhargav Ponnapalli · Jul 30, 2017

You should change the casing on the property to propTypes:

- List.PropTypes = {
+ List.propTypes = {
    todos: PropTypes.array.isRequired,
  };

Correct:

List.propTypes = {
  todos: PropTypes.array.isRequired,
};

(The instance of a PropTypes object is lowercase, but the Class/Type is uppercase. The instance is List.propTypes. The Class/Type is PropTypes.)

Related questions

React proptype array with shape

Is there a built-in way to use proptypes to ensure that an array of objects being passed to a component is actually an array of objects of a specific shape? Maybe something like this? annotationRanges: PropTypes.array(PropTypes.shape({ start: …

Read More
ReactJs: What should the PropTypes be for this.props.children?

Given a simple component that renders its children: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Question: What should the propType of the children …

Read More
React PropTypes : Allow different types of PropTypes for one prop

I have a component that receives a prop for its size. The prop can be either a string or a number ex: "LARGE" or 17. Can I let React.PropTypes know that this can be either one or the other in …

Read More