To do list making with React hooks

Question

I'm a bit new to React. I'm trying to make simple To do list with react hooks and struggling to make "delete all button". I thought it could be work to using setState [] or return [] but it didn't work... and also it's showing an error.

TypeError: tasks.map is not a function

Does anyone know how it figure out?

Here is my code

import React, {useState} from 'react'


let INITIAL_TASK = {
    title: 'React',
    doing: false,
}

const App = () => {
    const [tasks, setTasks] = useState([INITIAL_TASK])
    const [task_title, setTask_title] = useState('')

    const handleTextFieldChanges = e => {
        setTask_title(e.target.value)
    }

    const resetTextField = () => {
        setTask_title('')
    }

    const isTaskInclude = () => {
        return tasks.some(task => task.title === task_title)
    }

    const addTask = () => {
        setTasks([...tasks, {
            title: task_title,
            doing: false,
        }])
        resetTextField()
    }

    const deleteTask = (task) => {
        setTasks(tasks.filter(x => x !== task))
    }

    const deleteAllTask = () => {
       -------------
    }

    const handleCheckboxChanges = task => {
        setTasks(tasks.filter(x => {
            if (x === task) x.doing = !x.doing
            return x
        }))
    }

    return (
        <React.Fragment>
            <Container component='main' maxWidth='xs'>
                <CssBaseline/>
                <Box
                    mt={5}
                    display='flex'
                    justifyContent='space-around'
                >
                    <TextField
                        label='title'
                        value={task_title}
                        onChange={handleTextFieldChanges}
                    />
                    <Button
                        disabled={task_title === '' || isTaskInclude()}
                        variant='contained'
                        color='primary'
                        onClick={addTask}
                        href=''
                    >
                        add
                    </Button>
                    <Button
                        // disabled={task_title === '' || isTaskInclude()}
                        variant='contained'
                        color='secondary'
                        onClick={deleteAllTask}
                        href=''
                    >
                        all delete
                    </Button>
                </Box>
                <List
                    style={{marginTop: '48px'}}
                    component='ul'>
                    {tasks.map(task => (
                        <ListItem key={task.title} component='li'>
                            <Checkbox
                                checked={task.doing}
                                value='primary'
                                onChange={() => handleCheckboxChanges(task)}
                            />
                            <ListItemText>{task.title}</ListItemText>
                            <Button
                                href=''
                                onClick={() => deleteTask(task)}
                            >
                                delete
                            </Button>
                        </ListItem>
                    ))}
                </List>
            </Container>
        </React.Fragment>
    )
}

export default App

Answer 1

You can try doing below

const deleteAllTask = () => {
  setTasks([]);
};

or if you want it to set to initial value, you can do below

const deleteAllTask = () => {
  setTasks([INITIAL_TASK]);
};