title: React: PropTypes in stateless functional component
body: <p>In React, I wrote a stateless functional component and now want to add Prop Type validation to it.</p>
  
  <p><code>List</code> component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  function List(props) {
    const todos = props.todos.map((todo, index) =&gt; (&lt;li key={index}&gt;{todo}&lt;/li&gt;));
    return (&lt;ul&gt;&lt;/ul&gt;);
  }
  
  List.PropTypes = {
    todos: PropTypes.array.isRequired,
  };
  
  export default List;
  </code></pre>
  
  <p><code>App</code> component, rendering <code>List</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import List from './List';
  
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        todos: '',
      };
    }
  
    render() {
      return (&lt;List todos={this.state.todos} /&gt;);
    }
  }
  
  export default App;
  </code></pre>
  
  <p>As you can see in <code>App</code>, I am passing <code>this.state.todos</code> to <code>List</code>. Since <code>this.state.todos</code> 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 <code>map</code>.</p>
  
  <p>Why is the Prop Type validation not working as expected? Takin a look at <a href="https://stackoverflow.com/questions/44582209/proptypes-in-functional-stateless-component">this question</a>, the case seems identical.</p>