I'm working on a todo list in my current project. I can display the todo list but when I click the checkbox to mark a task as complete I get this TypeError
I've tried to use Google and Stack to find an answer but still can't figure out what it is I'm doing wrong. Why is toggleComplete not a function?
Reducer / todosOne.js
import { createSlice } from '@reduxjs/toolkit'
export const todosOne = createSlice({
name: 'todos',
initialState: [
{ id: 1, text: 'This is a todo item', complete: false },
{ id: 2, text: 'This is a todo item', complete: false },
{ id: 3, text: 'This is a todo item', complete: false },
{ id: 4, text: 'This is a todo item', complete: false },
{ id: 5, text: 'This is a todo item', complete: false },
],
toggleComplete: (store, action) => {
const checkedItem = store.items.find(item => item.id === action.payload)
if (checkedItem) {
checkedItem.complete = !checkedItem.complete
}
}
})
Component / TodoListOne.js
import React from 'react'
import styled from 'styled-components'
import { useSelector, useDispatch } from 'react-redux'
import { todosOne } from '../Reducers/todosOne'
export const TodoListOne = () => {
const dispatch = useDispatch();
const items = useSelector(store => store.todos);
const onChecked = complete => {
dispatch(todosOne.actions.toggleComplete(complete))
}
return (
<>
{items.map(todos => (
<TodoContainer key={todos.id}>
<List>
<label>
<input type="checkbox"
checked={todos.complete}
onChange={() => onChecked(todos.id)}
/>
</label>
</List>
<TodoText>{todos.text}</TodoText>
</TodoContainer>
))}
</>
)
}
Aucun commentaire:
Enregistrer un commentaire