I have made this to-do list App using redux with the help of a tutorial for the sake of learning Redux architecture. so the check box should work for every individual task added, but onChange I get all of the boxes' values turning to true when I figured I wasn't mapping throw the state. but then if you look into the logger on the console you see that I have got it working, only failing to display the check properly. you can find the full code here
this is the Task component
const Todo = ({ todo , idx , deleteTodo , editTodo,selected,text,check,checkTodo }) => {
return (
<div style={{ display: 'flex', flexDirection: 'flex-start', justifyContent: 'space-evenly', border: '1px solid white', padding: '5px', width: '200px', cursor: 'pointer' }} >
<input style={{ width: '1rem', height: '0.8rem', margin: '0', padding: '0' }} type="checkbox" checked={check} onChange={() => checkTodo(idx)} />
<div onClick={() => editTodo(idx)} >
{
selected === idx ? text : todo
} </div>
<div style={{ cursor: 'pointer' }} onClick={() => deleteTodo(idx)}>x</div>
</div>
)
}
Here is the action.reducer
export const checkTodo = key => ({
type: "CHECK_TODO",
payload: key
})
and this is the reducer switch case (the check box part )
case 'CHECK_TODO':
const todos5 = state.todos.map((todo, i) => {
if (i == action.payload) {
return { ...state, check: !todo.check ,text: todo}
}
return todo
})
setPersist(todos5)
return {
...state,todos5
}