displaying data based on filter - react todo list

Question

I am trying to display my todolist based on the filter the user chooses. at the moment, I have written the code for showing completed only. but it's not working.

Please take a look and tell why it's not working

import React,{Component} from 'react';
import  './reminderListStyles.css';
import Filters from './Filters';

class ReminderList extends Component{
    constructor(){
        super();
        this.state={
            filter:"completed"
        }
    this.getFilter=this.getFilter.bind(this);   
    }


    getFilter(x){
        this.setState({
            filter:x
        });
        //alert(x);
    }

    render(){



        return(
            <div>
            <ul>
            {this.props.reminder.map((item)=>{

                if(this.state.filter==='show_completed'){
                    if(  item.completed){
                        return  <li key={item.id}
              style={{textDecoration: item.completed? 'line-through':'none'}}
               onClick = {()=>{this.props.onToggle(item.id)}} >
               < input type="checkbox" checked={item.completed} />{item.text}</li>
                    }

                }

                return <li key={item.id}
              style={{textDecoration: item.completed? 'line-through':'none'}}
               onClick = {()=>{this.props.onToggle(item.id)}} >
               < input type="checkbox" checked={item.completed} />{item.text}</li>

            })}
            </ul>
            <Filters reminders={this.props.reminder}
                        filterState={this.getFilter}
             />
            </div>

            )
    }
}

export default ReminderList;

What do you mean by not working, what is the problem, also the state is set to "completed" and you are comparing with "show_completed". how do you expect it to work correctly — Shubham Khatri
– Shubham Khatri, Commented Jun 26, 2017 at 18:33
ah, yes! the initial state is set to completed. Let me change that. but the reason I am saying it's not working is that it's still displaying completed and not completed both. even when I click on complete — faraz
– faraz, Commented Jun 26, 2017 at 18:38

Mayank Shukla · Accepted Answer · 2017-06-26 19:13:19Z

1

Changes:

1. Instead of this.state.filter==='show_completed' it should be this.state.filter==='completed'.

2. You need to return null when if(item.completed) condition fails, otherwise it will return the item that you are returning outside of if condition.

Write it like this:

{this.props.reminder.map((item)=>{

    if(this.state.filter === 'completed'){
        if(item.completed){
           return <li key={item.id}
                      style={{textDecoration: item.completed? 'line-through':'none'}}
                      onClick = {()=>{this.props.onToggle(item.id)}} >
                          <input type="checkbox" checked={item.completed} />
                          {item.text}
                  </li>
        }
        return null        //here
    }

    return  <li key={item.id}
              style={{textDecoration: item.completed? 'line-through':'none'}}
              onClick = {()=>{this.props.onToggle(item.id)}} >
                  <input type="checkbox" checked={item.completed}/>
                  {item.text}
            </li>

})}

Update:

Call a function from render method and put the entire map logic inside that:

renderTodos(){

    return this.props.reminder.map((item)=>{
        if(this.state.filter === 'completed'){
            if( item.completed){
               return <li key={item.id}
                          style={{textDecoration: item.completed? 'line-through':'none'}}
                          onClick = {()=>{this.props.onToggle(item.id)}} >
                              <input type="checkbox" checked={item.completed} />
                              {item.text}
                      </li>
            }
            else null;
        }

        return  <li key={item.id}
                  style={{textDecoration: item.completed? 'line-through':'none'}}
                  onClick = {()=>{this.props.onToggle(item.id)}} >
                      <input type="checkbox" checked={item.completed}/>
                      {item.text}
                </li>

    })}
}

render(){
    return(
        <div>
            <ul>
                {this.renderTodos()}
            </ul>
            <Filters 
                reminders={this.props.reminder}
                filterState={this.getFilter}
            />
        </div>
    )
}

edited Jun 26, 2017 at 19:13

answered Jun 26, 2017 at 18:33

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

faraz Over a year ago

no, but the values of this.state.filter can be only one of these 3 show_all show_active show_completed

Mayank Shukla Over a year ago

ohk i that case replace completed by show_completed

Mayank Shukla Over a year ago

@faraz code that i suggested will filter all the todo's which will be having the status show_completed. Just put a return null as i suggested it will work correctly.

faraz Over a year ago

ok, it does work now. and the only thing I added was return null so, is that okay, or maybe there's still a mistake somewhere?

faraz Over a year ago

another question, which I think is more important is - is this the correct way of doing this? i have seen code where people save the returned value as a variable first and then just put the variable in the html as {returned_value} what do you say?

|

Collectives™ on Stack Overflow

displaying data based on filter - react todo list

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related