morizotter morizotter - 2 months ago 19
React JSX Question

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;

Answer

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

Comments