React - コンポーネントのフィルタ関数に値を渡す方法は？

Question

私は簡単なTo-doアプリを開発しようとしています。

私はこのようなアレイ内のすべての私のタスクを格納します。

var TASKS = [ 
    { 
    name: "Pay Bills", 
    completed: false, 
    id: 1, 
    }, 
    { 
    name: "Go shopping", 
    completed: false, 
    id: 2, 
    }, 
    { 
    name: "Pick up something", 
    completed: false, 
    id: 3, 
    }, 
    { 
    name: "Drink Coffee", 
    completed: true, 
    id: 4, 
    }, 
]; 

と私は上場コンポーネントに小道具としてブール値を渡すことによって分離されたセクション（TODO /行わ）でそれらを一覧表示します。

var Application = React.createClass({ 
    propTypes: { 
    title: React.PropTypes.string, 
    }, 

    getDefaultProps: function() { 
    return { 
     title: "Add item", 
    } 
    }, 

    onTodoAdd: function(name) { 
     ... 
    }, 

    onRemoveTask: function(index) { 
     ... 
    }, 

    onCompletedTask: function(index) { 
     ... 
    }, 

    render: function() { 
    return (
     <div className="to-do"> 

     <Section title={this.props.title}> 
      <AddTodoForm onAdd={this.onTodoAdd} /> 
     </Section> 

     <Section title="to-do"> 
      <ListTasks initialTasks={TASKS} completedTasks={false} /> 
     </Section> 

     <Section title="done"> 
      <ListTasks initialTasks={TASKS} completedTasks={true} /> 
     </Section> 
     </div> 
    ); 
    } 
}); 

とリストコンポーネントは、次のようになります：

私のコンポーネントの構造はここにある

var ListTasks = React.createClass({ 
    propTypes: { 
    initialTasks: React.PropTypes.array.isRequired, 
    completedTasks: React.PropTypes.bool.isRequired, 
    }, 

    getInitialState: function() { 
    return { 
     tasks: this.props.initialTasks, 
    }; 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.tasks 
     .filter(function(task, index, props) { 
      return task.completed === props.completedTasks; 
     }) 
     .map(function(task, index) { 
      return(
      <Task 
       name={task.name} 
       key={task.id} 
       completed={task.completed} 
       onCompleted={function() {this.onCompletedTask(index)}.bind(this)} 
       onRemove={function() {this.onRemoveTask(index)}.bind(this)} 
      /> 
     ); 
     }.bind(this))} 
     </div> 
    ); 
    } 
}); 

が、私は

とフィルタ機能に

completedTasks={true/false} 

を渡すカント

props.completedTasks 

お気軽にお問い合わせください。

ありがとうございます。

Answer 1

問題はレンダリングメソッドのListTasksコンポーネント内にあります。

Array.filterメソッドの3番目のパラメータは、コンポーネントの小道具ではなく、配列です（配列フィルタが呼び出されました）。新しい変数（小道具）を定義することができますし、lexical scoping

render: function() { 
    var props = this.props; 
    return (
     <div> 
     {this.state.tasks 
     .filter(function(task, index) { 
      return task.completed === props.completedTasks; 
     }) 
     .map(function(task, index) { 
      return(
      <Task 
       name={task.name} 
       key={task.id} 
       completed={task.completed} 
       onCompleted={function() {this.onCompletedTask(index)}.bind(this)} 
       onRemove={function() {this.onRemoveTask(index)}.bind(this)} 
      /> 
     ); 
     }.bind(this))} 
     </div> 
    ); 
    }