Daniel Daniel - 10 days ago 7
React JSX Question

Why is it unable to read the PropType.func?

I have created a component ChannelSection.jsx which is not the outermost component, App.jsx will be the outermost component. My ChannelSection will need to receive props from its parent component. So added the prop types bellow:

ChannelSection.jsx:

import React, {Component} from 'react';
import ChannelForm from './ChannelForm.jsx';
import ChannelList from './ChannelList.jsx';

class ChannelSection extends Component {
render(){
return (
<div>
<ChannelList {...this.props} />
<ChannelForm {...this.props} />
</div>
)
}
}

ChannelSection.propTypes = {
channels: React.PropTypes.array.isRequired,
setChannel: React.PropTypes.func.isRequired,
addChannel: React.PropTypes.func.isRequired
}

export default ChannelSection


And I am getting this error in the console and I am not sure why and I need some assistance in troubleshooting this:

Uncaught TypeError: Cannot read property 'func' of undefined


My App.jsx file:

import React, {Component} from 'react';
import ChannelSection from './channels/ChannelSection.jsx';

class App extends Component {
constructor(props){
super(props);
this.state = {
channels: []
};
}
addChannel(name){
let {channels} = this.state;
channels.push({id: channels.length, name});
this.setState({channels});
// TODO: Send to Server
}
setChannel(activeChannel){
this.setState({activeChannel});
// TODO: Get Channel Messages
}
render(){
return (
<ChannelSection
channels={this.state.channels}
addChannel={this.addChannel.bind(this)}
setChannel={this.setChannel.bind(this)} />
)
}
}

export default App


my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(App, document.getElementById('root'));

Answer

Ensure you are using React.PropTypes in all cases. It being plural and case both matter.

Comments