Filter array onClick and render the remaining items from the array

Question

I have created a todo app and I am trying to filter todos in 3 different conditions all, completed, incompleted. As default I want to show all the items and then filter them. I know that I can use filter as follow for example:

array.filter(t => t.completed) or array.filter(t => !t.completed)

but I dont know how to render all of them and then render the filtered items only. The code is as follow:

render() {
let notes = this.state.notes.filter(n => n.completed).map((todo, 
index) => {
  return (
    <Todo 
      key={index} 
      note={todo} 
      deleteTodo={() => this.deleteTodo(index)} 
      handleClick={() => this.handleClick(index)}/>
  );
});
const allNotes = this.state.notes.length
let completedNotes = this.state.notes.filter(n => n.completed).length
let incompletedNotes = this.state.notes.filter(n => 
!n.completed).length
return (<div>{notes}</div>);

That depends on how you render them currently? Can you share your code and what doesn't work? — Luca Kiebel
– Luca Kiebel, Commented Aug 13, 2018 at 13:07
How you determine which items should be shown (all, completed, incomplete) ? — Titus
– Titus, Commented Aug 13, 2018 at 13:17
This is the point where I am stack now. I have 3 buttons (all, completed, incomplete) which are showing the number of each (all, completed, incomplete) but I dont know how to make them active. As for the filter that I am using with the map is not working properly. — PanosCool
– PanosCool, Commented Aug 13, 2018 at 13:21

Jeremy M · Accepted Answer · 2018-08-13 13:22:23Z

3

What you are describing can be accomplished many ways, but a straightforward answer would be to use state (or props if the filter is controlled via a parent):

getFilteredNotes() {
  switch (this.state.noteFilter) {
    case 'completed':
      return this.state.notes.filter(n => n.completed);
    case 'incomplete'
      return this.state.notes.filter(n => !n.completed);
    case 'all':
    default:
      return this.state.notes;
}

render() {
  return this.getFilteredNotes().map(n => (
    <Todo note={n}/>
  ));
}

answered Aug 13, 2018 at 13:22

Jeremy M

1845 bronze badges

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

Comments

gazdagergo · Accepted Answer · 2018-08-13 13:12:28Z

1

Just render the filtered array with map;

render() {
  return (
    <div>
       {this.state.todos.filter(t => t.completed).map(t => (
         <TodoItem>{t.text}</TodoItem>
        }
    </div>
  )
}

answered Aug 13, 2018 at 13:12

gazdagergo

6,7811 gold badge36 silver badges50 bronze badges

Collectives™ on Stack Overflow

Filter array onClick and render the remaining items from the array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related