it must be a function, usually from React.PropTypes : <p>I want to pass string from Main to Header. It succeeds but warning. I'm a beginner of React so I can not figure out what <code>it must be a function</code> means.</p>

<p>Anyone knows how to solve this warning?</p>

<p>The warning is:</p>

<p><a href="https://i.stack.imgur.com/4baOJ.png"><img src="https://i.stack.imgur.com/4baOJ.png" alt="enter image description here"></a></p>

<p>And my code is below:</p>

<p><em>Main.js</em></p>

<pre><code>import React from 'react';

import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';

const propTypes = {
  mainInfo: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    apps: React.PropTypes.array.isRequired,
  }),
};

class Main extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      &lt;div&gt;
        &lt;Header title={this.props.mainInfo.title} /&gt;
        &lt;AppList apps={this.props.mainInfo.apps} /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
}

Main.propTypes = propTypes;

export default Main;
</code></pre>

<p><em>Header.js</em></p>

<pre><code>import React from 'react';

const propTypes = {
  title: React.PropTypes.string.isRequred,
};

class Header extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      &lt;div className="header"&gt;
        &lt;h1&gt;{this.props.title}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
}

Header.propTypes = propTypes;

export default Header;
</code></pre>
