关于点击错误的过滤表：无法读取未定义

Question

我是React的新手。我想在这里完成的是允许用户过滤奖励结果onClick。虽然奖励具有不同的状态，但我将密钥状态传递给更新filteredReward状态。但是，在RewardTable组件中，表应根据奖励，待定，确认等状态重新呈现。我收到此错误

"TypeError: Cannot read property 'apply' of undefined
at new RewardRow (tiyugurugu.js:84:74)

以下是link to edit in jsbin

这就是代码。

class RewardTable extends React.Component {
  render() {
    var reward_rows = [];
    if(this.props.filtered !== "all") {
      this.props.rewards.filter(function(reward){
        return reward.status === this.props.filtered;
      },this)
      .map(reward => {
         reward_rows.push(<RewardRow key={reward.promotion} reward={reward}/>)
      });
    } else {
      this.props.rewards.map(reward => {
         reward_rows.push(<RewardRow key={reward.promotion} reward={reward}/>)
      });
    }


    return(
      <table>
        <thead>
          <tr>
            <th>Promotion</th>
            <th>Reward</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {reward_rows}
        </tbody>
      </table>
    );
  }
}

class RewardRow extends React.Component {
  render() {
    return(
      <tr>
        <td>{this.props.reward.promotion}</td>
        <td>{this.props.reward.reward}</td>
        <td>{this.props.reward.status}</td>
      </tr>
    );
  }
}

class RewardFilter extends React.Component {

  render() {
    var filters = [],
        status = [
          "all",
          "pending",
          "confirmed",
          "rejected"
        ];
    status.map((status) => {
      filters.push(<span onClick={this.props.onFilterChange.bind(this, status)} key={status} className="btn btn-default">{status}</span>);
    });
    return(
      <div>
        {filters}
      </div>
    );
  }
}

class UserReward extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
       rewards: [],
       filteredReward: ""
     };
  }
  updateRewardFilter(key) {
    this.setState({
      filteredReward: key
    });
  }
  componentWillMount() {
    this.rewards = [
      {
        promotion: "Ebay",
        reward: "10",
        status: "pending"
      },
      {
        promotion: "Vodafone",
        reward: "180",
        status: "pending"
      },
      {
        promotion: "PayPal",
        reward: "20",
        status: "pending"
      },
      {
        promotion: "O2",
        reward: "60",
        status: "confirmed"
      },
      {
        promotion: "myBet",
        reward: "5",
        status: "confirmed"
      },
      {
        promotion: "Rewee",
        reward: "5",
        status: "rejected"
      },
      {
        promotion: "Zalando",
        reward: "15",
        status: "rejected"
      }
    ];

    this.setState({
      rewards: this.rewards,
      filteredReward: "all"
    });
  }
  render() {
    return(
      <div>
        <RewardFilter onFilterChange={this.updateRewardFilter.bind(this)} />
        <RewardTable filtered={this.state.filteredReward} rewards={this.state.rewards} />
      </div>
    );
  }
}

ReactDOM.render(
  <UserReward />,
  document.getElementById('container')
);

和模拟