React: PropTypes in stateless functional component

Question

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 1

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.)