title: React - How to pass value to filter function in component?
body: <p>I am trying to build a simple to-do app.</p>
  
  <p>I store all my tasks in an array like this:</p>
  
  <pre><code>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,
    },
  ];
  </code></pre>
  
  <p>and I want to list them in separated sections (todo/done) by passing boolean value as props to the listing component.</p>
  
  <p>My component structure is here:</p>
  
  <pre><code>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 (
        &lt;div className="to-do"&gt;
  
          &lt;Section title={this.props.title}&gt;
            &lt;AddTodoForm onAdd={this.onTodoAdd} /&gt;
          &lt;/Section&gt;
  
          &lt;Section title="to-do"&gt;
            &lt;ListTasks initialTasks={TASKS} completedTasks={false} /&gt;
          &lt;/Section&gt;
  
          &lt;Section title="done"&gt;
            &lt;ListTasks initialTasks={TASKS} completedTasks={true} /&gt;
          &lt;/Section&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>and the listing component looks like this:</p>
  
  <pre><code>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 (
        &lt;div&gt;
          {this.state.tasks
          .filter(function(task, index, props) {
            return task.completed === props.completedTasks;
          })
          .map(function(task, index) {
            return(
              &lt;Task
                name={task.name}
                key={task.id}
                completed={task.completed}
                onCompleted={function() {this.onCompletedTask(index)}.bind(this)}
                onRemove={function() {this.onRemoveTask(index)}.bind(this)}
              /&gt;
            );
          }.bind(this))}
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>but I canť pass the</p>
  
  <pre><code>completedTasks={true/false}
  </code></pre>
  
  <p>to the filter function with</p>
  
  <pre><code>props.completedTasks
  </code></pre>
  
  <p>is there anyone who can help please? </p>
  
  <p>Thanks a lot.</p>