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