I have an array of users andtodos. There are objects in the todos array, and todos and user ids in them. I display users and their todos. When I click on a user, it hides his todos. Problem: How to set up filtering so that clicking the user again shows his todos. A disabled user obtains a class with the opacity property.
Intended effect: : I click the user (id 1) -> hide todos assigned to this user (only todos for the user (id2) and user (id3) are visible -> click the user (id2) -> hide the todos assigned to this user user (only todos for user (id3) are visible) -> click user (id1) again -> displays hidden todos for this user (user todos are visible (id1 and id3)
Demo here: https://stackblitz.com/edit/react-s7aags
class App extends Component {
constructor() {
super();
this.state = {
users: [{id:1, name: 'Martin'}, {id:3, name: 'Gregor'}, {id:2, name: 'Paul'}],
todos: [{user_id:3, todos:['swim', 'feed']}, {user_id:1, todos:['sleep', 'read']}, {user_id:2, todos:['drinking', 'dancing']} ],
hideTodosUserId: ''
};
}
filterTodos = (userId) => {
console.log(userId);
const hideTodos = this.state.todos.filter(item => item.user_id !== userId);
console.log(hideTodos);
this.setState({
todos: hideTodos,
hideTodosUserId: userId
})
}
render() {
return (
<div>
<ul>
{this.state.users.map(user => {
return <li key={user.id} onClick={() => this.filterTodos(user.id)} className={this.state.hideTodosUserId === user.id ? 'hideTodos' : '' }>{user.name}</li>
})}
</ul>
<ul>
{this.state.todos.map(items => {
return <li key={items.id}>{items.todos.map(todo => <li key={todo.id}>{todo}</li>)}</li>
})}
</ul>
</div>
);
}
}
css
.hideTodos {
opacity: 0.5;
}
from Filtering todos assigned to the user (hidden and displayed)
No comments:
Post a Comment