CODEWITHSUNDEEP
reactjs
morizotter
morizotter

Reputation: 1974

it must be a function, usually from React.PropTypes

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 it must be a function means.

Anyone knows how to solve this warning?

The warning is:

enter image description here

And my code is below:

Main.js

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 (
      <div>
        <Header title={this.props.mainInfo.title} />
        <AppList apps={this.props.mainInfo.apps} />
        <Footer />
      </div>
    );
  }
}

Main.propTypes = propTypes;

export default Main;

Header.js

import React from 'react';

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

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

  render() {
    return (
      <div className="header">
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Header.propTypes = propTypes;

export default Header;

Upvotes: 88

Views: 57373

Answers (7)

U.Aasd
U.Aasd

Reputation: 1761

The easy way to solve the problem in 3 steps:

  • step 1: install NPM prop-types package: npm prop-types install

  • step 2: import the package in your file: import PropTypes from 'prop-types'

  • step 3: Remove the React keyword from the statement (e.g: React.PropTypes.string.isRequired to PropTypes.string.isRequired depends on your statement, so just remove the React keyword, because you are now importing from prop-types, not from the React library.

Upvotes: 1

user8202629
user8202629

Reputation:

Just copy & paste, unless you can make sure that you would not type some typo.

VS Code & plugins

TestModal.propTypes = {
    title: PropTypes.string,
    //badHideModal: PropTypes.func.required,
    hideModal: PropTypes.func.isRequired,
};

enter image description here

Upvotes: 1

Andrey Luiz
Andrey Luiz

Reputation: 471

In my case it happened when I declared Component.propTypes and below that, instead of writing Component.defaultProps I wrote again Component.propTypes assigning the default values.

Upvotes: 3

Tyler Collier
Tyler Collier

Reputation: 11988

This happens when your PropType is actually undefined.

In my case I had specified a propType of PropTypes.integer, which is not one of the list of proptypes. That literally turns into undefined. Instead I should have used PropTypes.number.

Watch out for similar mistakes with PropTypes.bool vs PropTypes.boolean, as well as PropTypes.func vs PropTypes.function.

Upvotes: 43

matt_jared
matt_jared

Reputation: 91

Also, it's bool for booleans. I skimmed the docs and had the exact same problem until I went back and read them carefully.

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Upvotes: 9

Googol
Googol

Reputation: 2923

e.g.

React.PropTypes.sting
React.PropTypes.text

React could also tell the user: "The PropType 'sting' you defined is undefined. Did you misspell it?. Available PropTypes are: string, number, bool, etc."

Upvotes: 4

dannyjolie
dannyjolie

Reputation: 11349

You have an error: React.PropTypes.string.isRequred. Spell isRequired correctly, and it should be ok.

Upvotes: 134

Related Questions