it must be a function, usually from React.PropTypes
ReactjsReactjs Problem Overview
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:
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;
Reactjs Solutions
Solution 1 - Reactjs
You have an error: React.PropTypes.string.isRequred
. Spell isRequired
correctly, and it should be ok.
Solution 2 - Reactjs
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
.
Solution 3 - Reactjs
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
Solution 4 - Reactjs
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."
Solution 5 - Reactjs
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.
Solution 6 - Reactjs
just copy & paste, unless you can make sure that you would not type some typo!
> I also had this problem, and it wastes my much time to fix it!
So, just make a note!
VS code & plugins
> in case a typo!
TestModal.propTypes = {
title: PropTypes.string,
//badHideModal: PropTypes.func.required,
hideModal: PropTypes.func.isRequired,
};
Solution 7 - Reactjs
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.
Code: 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 theReact
keyword, because you are now importing from prop-types, not from the React library.
Solution 8 - Reactjs
Something similar to isRequred
instead of isRequired
happened to me. I was trying to define the default props, but copy-pasted the propTypes and never changed the name, so I ended up with something like this:
import PropTypes from 'prop-types'
const Main = ({ title }) => // whatever
Main.propTypes = {
title: PropTypes.string
}
Main.propTypes = { // this should have been Main.defaultProps! 🤦♂️
title: 'This is the default title!'
}
So PropTypes was complaining about the title
's prop type not being the right thing. It said something like "it must be a function, usually from React.PropTypes but it was a string".
I thought I was going crazy. I was looking at the first Main.propTypes
and trying to find typo or anything that could be wrong, but as you can see it was completely fine. I opened multiple files that had prop types defined but weren't throwing the error.
I was obviously looking at the wrong place but eventually found it out of luck. I was pretty lucky to actually find it. These facepalming bugs are quite hard to figure out because they're like a magician moving one hand to attract all the eyes while preparing the trick with the other one, usually in plain sight.