React: PropTypes in stateless functional component

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.

50869 次浏览

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