PropTypes are always wrong - reactjs

Question

App component - set data from data.json, send props to children components:
import React from 'react';
import axios from 'axios';
import { HeaderPanel, PostsPanel } from './index';
import './app.scss';
export default class App extends React.Component {
constructor() {
super();
this.state = {
userData: Object,
infoData: Object,
postsData: Object
};
}
componentDidMount() {
axios.get('./data.json')
.then(res => {
this.setState({
userData: res.data.userData,
infoData: res.data.infoData,
postsData: res.data.posts
});
});
}
render() {
return (
<div className="app">
<div>
<HeaderPanel
userData={this.state.userData}
infoData={this.state.infoData}
/>
</div>
<div className="posts">
<PostsPanel postsData={this.state.postsData} />
</div>
</div>
);
}
}
First-child, divide props to approporiate components, give me the error too:
import React from 'react';
import PropTypes from 'prop-types';
import {ModalContainer, ModalDialog} from 'react-modal-dialog';
import { TopFunctionPanel, TopDisplayData } from './topPanel';
import { MiddleFunctionPanel, MiddleDisplayData } from './middlePanel';
import './headerPanel.scss';
export default class HeaderPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: Object,
user: String,
city: String,
country: String,
like: Number,
following: Number,
followers: Number,
isOpen: false
};
this.setLike = this.setLike.bind(this);
this.setFollowers = this.setFollowers.bind(this);
this.toggleModalWindow = this.toggleModalWindow.bind(this);
}
componentWillReceiveProps(props) {
this.setState({
avatar : props.userData.avatar,
user: props.userData.user,
city: props.userData.city,
country: props.userData.country,
like : props.infoData.like,
following: props.infoData.following,
followers: props.infoData.followers,
});
}
setLike(val) {
this.setState({like: val});
}
setFollowers(val) {
this.setState({followers: val});
}
toggleModalWindow() {
this.setState({isOpen: !this.state.isOpen});
}
render() {
return (
<div className="headerPanel">
{
this.state.isOpen &&
<ModalContainer onClose={this.toggleModalWindow}>
<ModalDialog onClose={this.toggleModalWindow}>
<div className="modal">
<div>
<div><h1>You share:</h1></div>
</div>
<p>{window.location.href}</p>
</div>
</ModalDialog>
</ModalContainer>
}
<TopFunctionPanel
setLike={this.setLike}
like={this.state.like}
toggleModalWindow={this.toggleModalWindow}
/>
<TopDisplayData
avatar={this.state.avatar}
user={this.state.user}
city={this.state.city}
country={this.state.country}
/>
<MiddleDisplayData
like={this.state.like}
following={this.state.following}
followers={this.state.followers}
/>
<MiddleFunctionPanel
setFollowers={this.setFollowers}
followers={this.state.followers}
/>
</div>
);
}
}
HeaderPanel.propTypes = {
userData: PropTypes.object,
infoData: PropTypes.object
};
And grand-child. They give me this strange error too
import React from 'react';
import PropTypes from 'prop-types';
import './middlePanel.scss';
const DisplayData = ({ like, following, followers }) => {
return (
<div className="middleDisplayData">
<div>
<p>{like}</p>
<p>Liks</p>
</div>
<div>
<p>{following}</p>
<p>Following</p>
</div>
<div>
<p>{followers}</p>
<p>Followers</p>
</div>
</div>
);
};
export default DisplayData;
DisplayData.propTypes = {
like: PropTypes.number,
following: PropTypes.number,
followers: PropTypes.number
};
And I have a warning (console and jest gave me this):
warning.js:35 Warning: Failed prop type: Invalid prop like of type function supplied to DisplayData, expected number.
in DisplayData (created by HeaderPanel)
in HeaderPanel (created by App)
in div (created by App)
in div (created by App)
in App
I don't get it. My propTypes should be number (in grand-child component). But even if I change it to func, I have warning that it should be number. I know that with func I should to use .isRequire because of undefined, but here? I even have no idea what is wrong. I saw similar topics, but they's about func prop type (and as I understood adding .isRequire will help me) or some wrong spelling.

Answer 1

I updated my questione.
Hmm, it strange, but it looks like everything is ok. It looks like during sending props from one component to second they change they type. After render they are function and then consola show this warning. But in the end they change to number so, everything is ok.