Warning: failed prop type in React error

Question

I'm getting this same error for the 7 of my propTypes below. I can't find what's causing this problem, but I know that propTypes is working because I have everything set up correctly.

Here is my code and the error that showing in the console.

Warning: Failed prop type: The prop _id is marked as required in DealListItem, but its value is undefined. in DealListItem (created by DealList) in DealList (created by Deal) in div (created by Deal)

DealListItem.js

const DealListItem = (props) => {
  return (
    <div className="item">
      <h2>{this.props.title}</h2>
      <p className="item__message">{this.props.shortUrl}</p>
      <p className="deal-item">Description:{this.props.description}</p>
      <p className="deal-item">Type: {this.props.category}</p>
      <p className="deal-item">Co. {this.props.location}</p>
      <p className="deal-item">€{this.props.price}</p>
      <p className="deal-item">{ moment(this.props.createdAt).startOf('lll').fromNow() }</p>
      <img className="deal-item" src="http://placehold.it/125x125"/>
      <button className="button-deal btn-success" onClick={() => {Meteor.call('links.determineVisibility', this.props._id, !this.props.visible);}}>
        // If visible hide -> Else -> Show
        {this.props.visible ? 'Hide' : 'Show'}
      </button>
    </div>
  );
};

DealListItem.propTypes = {
  _id: React.PropTypes.string.isRequired,
  title: React.PropTypes.string.isRequired,
  description: React.PropTypes.string.isRequired,
  category: React.PropTypes.string.isRequired,
  location: React.PropTypes.string.isRequired,
  price: React.PropTypes.string.isRequired,
  visible: React.PropTypes.bool.isRequired
};

DealList.js

import DealListItem from './DealListItem';
import DealListEmpty from './DealListEmpty';

export default class DealList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      deals: []
    };
  }

  componentDidMount() {

    this.linksTracker = Tracker.autorun(() => {
      Meteor.subscribe('deals');

      const deals = Deals.find({
        // Get session variable 'displayVisible'
        visible: Session.get('displayVisible')
      }).fetch();

      // Set the state of deals
      this.setState({ deals });
    });
  }

  componentWillUnmount() {
    this.linksTracker.stop();
  }

  renderDealListItem() {
    if (this.state.deals.length === 0) {
      return (
        <div className="item">

          <p className="item__status-message">No Deals to show. Get adding!</p>

        </div>
      );
    }

    // Use map to get the deals
    return this.state.deals.map((deal) => {

      return <DealListItem key={deal._id} deal={deal}/>;

    });
  }
  render() {
    return (
      <div>



          {/* Render the documents inside the render function */}
          {this.renderDealListItem()}



      </div>
    );
  }
};

I'll update with more code if needed to debug. Thank you

Answer 1

When you use your DealListItem you need to pass the props you defined as required to it, like this:

<DealListItem key={deal._id} _id={deal._id} title={deal.title} description={deal.description} category={deal.category} location={deal.location} price={deal.price} visible={deal.visible} />;

You can use jsx's spread operator to make it shorter like this

<DealListItem key={deal._id} {...deal} />;

(On a side note, I think you'll need to bind this for the renderDealListItem method (for react>=0.13 ))