whiteadi whiteadi - 3 months ago 78
React JSX Question

Failed prop type: Chat: prop type `room` is invalid; it must be a function, usually from React.PropTypes

this is the full code for the react component:

import React from 'react';

class Chat extends React.Component {
handleSubmit(e) {
e.preventDefault();

this.props.addMessage(this.props.room.id, this.state.message);

this.setState({ message: '' });
}

handleMsgChange(event) {
this.setState({ message: event.target.value });
}

render() {
return (
<div>
<div>{this.props.room.messages.toString()}</div>
<form onSubmit={this.handleSubmit}>
<input
onChange={this.handleMsgChange}
value={this.state.message}
type="text" placeholder="Your message"
/>
<input type="submit" value="Send" />
</form>
</div>
);
}
}

Chat.propTypes = {
addMessage: React.PropTypes.func,
room: React.PropTypes.Object,
};

export default Chat;


and I get the error:

Failed prop type: Chat: prop type
room
is invalid; it must be a function, usually from React.PropTypes.

Answer

Change room: React.PropTypes.Object to room: React.PropTypes.object. You've made a typo, object property should start with o in lowercase.