I don’t understand what I’m doing wrong, I get a invariant error. The following currently works.
PurchaseList = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
return {
purchases: Purchases.find({}).fetch()
}
},
renderTasks() {
return this.data.purchases.map((task) => {
return <Task key={task._id} task={task} />;
});
},
render() {
return (
<div className="container">
<header>
<h1>Purchase List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
});
Task = React.createClass({
propTypes: {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
task: React.PropTypes.object.isRequired
},
render() {
return (
<li>{this.props.task.firstName}</li>
);
}
});
However, if I changed task to purchase I get the invariant error.
eg) PurchaseList.jsx
PurchaseList = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
return {
purchases: Purchases.find({}).fetch()
}
},
renderPurchases() {
return this.data.purchases.map((purchase) => {
return <Purchase key={purchase._id} task={purchase} />;
});
},
render() {
return (
<div className="container">
<header>
<h1>Purchase List</h1>
</header>
<ul>
{this.renderPurchases()}
</ul>
</div>
);
}
});
Purchase.jsx
Purchase = React.createClass({
propTypes: {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
purchase: React.PropTypes.object.isRequired
},
render() {
return (
<li>{this.props.purchase.firstName}</li>
);
}
});
Can somebody please explain what I’m doing wrong, or what is causing this? Why can I use task but not purchase?