React todo list - how to make the filter work

386
June 25, 2017, at 5:04 PM
handleFilters(filter){
   console.log(filter);
}
render(){
   return(
       <div>
          <a href="#" filter="show_all" onClick={this.handleFilters}>All</a>
          {'  '}
          <a href="#" filter="show_active">Active</a>
          {'  '}
          <a href="#" filter="show_completed">Completed</a>
     </div>

I am making a todo app and have it's working too, but I am having a bit of a problem adding the filters where I can show All todos, active todos, or the completed todos.

what I am trying to do at the moment is to get the value of filter from the a href tags and then will use it to filter the todo items from the list. but at the moment, I am just trying to get the value of filter, so how do I do that?

Answer 1

You could avoid storing data in DOM like this

const match = filter => () => this.handleFilters(filter)
<div>
          <a href="#" onClick={match('show_all')}>All</a>
          {'  '}
          <a href="#" onClick={match('show_active')}>Active</a>
          {'  '}
          <a href="#" onClick={match('show_completed')}>Completed</a>
     </div>
Answer 2
handleFiltersShowActive(){ 
     const tds = this.props.todos.foreach(todo => 
    if(!todo.isCompleted) 
    Displaytodolist.push(todo);
    );
    this.setState(displaytodo: tds);
    } 
    render(){ 
    {todos} = this.props;
    Let display = this.state.displaytodo.foreach( todo => 
visiblelist.push (
<div> {todo.title} </div>
);
);
    return( 
    <div> <a href="#" filter="show_all" onClick={this.handleFilters}>All</a> {' '}
     <a href="#" filter="show_active" onClick={this.handleFiltersShowActive}>Active</a> {' '}
     <a href="#" filter="show_completed">Completed</a> </div>
{display}
    )};

Try this out.

Rent Charter Buses Company
READ ALSO
file upload with circle progress bar

file upload with circle progress bar

i would to insert in my html form a progress bar but i don't know how can i do

428
How to get all users from laravel api?

How to get all users from laravel api?

I am building an admin dashboard for my app with angular as frontend framework and Laravel API as a backend

247
How to use gradients as inputs in TensorFlow

How to use gradients as inputs in TensorFlow

I am trying to use the gradients of a specific layer of my network as input to the following layer (derivative with respect to the layers weights)My code is too long to put it all here but below is the problematic part (it broke only after inserting it)

549
Push int to Array

Push int to Array

How can i fill Array from ArrayExample:

437