CODEWITHSUNDEEP
javascriptreactjs
Daniel
Daniel

Reputation: 15413

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'));

Upvotes: 0

Views: 364

Answers (1)

kwelch
kwelch

Reputation: 2469

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

Update

React.PropTypes is now deprecated. Please use the prop-types npm package which has a default export PropTypes.

Those using PropTypes from the react package, you can use react-codemod to update your project.

Upvotes: 2

Related Questions