title: Failed prop type The prop is marked as required but its value is `undefined`
body: <p>I'm using react v4, and I'm trying to list an array in the page "treinamentos", but I'm getting an error as I load the page: </p>
  
  <blockquote>
    <p>Failed prop type: The prop <code>treinamentos</code> is marked as required in
    <code>Treinamentos</code>, but its value is <code>undefined</code>.</p>
  </blockquote>
  
  <p>What am I missing here? is it because of the version I'm using?</p>
  
  <p><a href="https://i.stack.imgur.com/v2jrG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v2jrG.png" alt="enter image description here"></a></p>
  
  <p><strong>Treinamentos:</strong></p>
  
  <pre><code>import React from 'react';
  import TreinamentosList from './TreinamentosList';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  class Treinamentos extends React.Component {
    render() {
      return (
        &lt;div&gt;
          Treinamentos
          &lt;TreinamentosList treinamentos={this.props.treinamentos} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Treinamentos.propTypes = {
    treinamentos: PropTypes.array.isRequired
  }
  
  function mapStateToProps(state) {
    return {
      treinamentos: state.treinamentos
    }
  }
  
  export default connect(mapStateToProps)(Treinamentos);
  </code></pre>
  
  <p><strong>TreinamentosList:</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  export default function TreinamentosList({ treinamentos }) {
    const emptyMessage = (
      &lt;p&gt;Adicione um treinamento&lt;/p&gt;
    );
  
    const treinamentosList = (
      &lt;p&gt;treinamentos list&lt;/p&gt;
    );
  
    return (
      &lt;div&gt;
        {treinamentos.length === 0 ? emptyMessage : treinamentosList}
      &lt;/div&gt;
    );
  }
  
  TreinamentosList.propTypes = {
    treinamentos: PropTypes.array.isRequired
  }
  </code></pre>
  
  <p><strong>AppRouter:</strong> </p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import Greetings from './components/Greetings';
  import SignUp from './components/singup/SignUp';
  import NoMatch from './components/NoMatch';
  import Treinamentos from './components/Treinamentos';
  import NavigationBar from './components/NavigationBar';
  
  const AppRouter = () =&gt; (
    &lt;Router&gt;
      &lt;div className="container"&gt;
        &lt;NavigationBar /&gt;
        &lt;Switch&gt;
          &lt;Route path="/" component={Greetings} exact={true}/&gt;
          &lt;Route path="/signup" component={SignUp}/&gt;
          &lt;Route path="/treinamentos" component={Treinamentos}/&gt;
          &lt;Route component={NoMatch}/&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  
  export default AppRouter;
  </code></pre>