```jsx
import React, { useState } from 'react';
const styles = {
container: {
maxWidth: '600px',
margin: '0 auto',
padding: '20px',
},
form: {
display: 'flex',
flexDirection: 'column',
marginBottom: '20px',
},
input: {
margin: '5px 0',
padding: '5px',
},
button: {
margin: '5px 0',
padding: '5px 10px',
backgroundColor: '#4CAF50',
color: 'white',
border: 'none',
cursor: 'pointer',
},
task: {
display: 'flex',
alignItems: 'center',
marginBottom: '10px',
},
completed: {
textDecoration: 'line-through',
color: 'red',
},
};
function TodoList() {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState({ description: '', category: '' });
const [editingTask, setEditingTask] = useState(null);
const handleInputChange = (e) => {
setNewTask({ ...newTask, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (editingTask) {
setTasks(tasks.map(task => task.id === editingTask.id ? { ...task, ...newTask } : task));
setEditingTask(null);
} else {
setTasks([...tasks, { id: Date.now(), ...newTask, completed: false }]);
}
setNewTask({ description: '', category: '' });
};
const toggleComplete = (id) => {
setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task));
};
const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};
const editTask = (task) => {
setEditingTask(task);
setNewTask({ description: task.description, category: task.category });
};
return (
<div style={styles.container}>
<h1>Todo List</h1>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="text"
name="description"
value={newTask.description}
onChange={handleInputChange}
placeholder="Task description"
style={styles.input}
/>
<input
type="text"
name="category"
value={newTask.category}
onChange={handleInputChange}
placeholder="Category"
style={styles.input}
/>
<button type="submit" style={styles.button}>
{editingTask ? 'Update Task' : 'Add Task'}
</button>
</form>
<div>
{tasks.map(task => (
<div key={task.id} style={styles.task}>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleComplete(task.id)}
/>
<span style={task.completed ? styles.completed : null}>
{task.description} ({task.category})
</span>
<button onClick={() => editTask(task)} style={styles.button}>Edit</button>
<button onClick={() => deleteTask(task.id)} style={styles.button}>Delete</button>
</div>
))}
</div>
<p>Total Completed Tasks: {tasks.filter(task => task.completed).length}</p>
</div>
);
}
export default TodoList;
```
This React component implements a Todo List with the following features:
- Adding new tasks with description and category
- Editing existing tasks
- Marking tasks as complete/incomplete
- Deleting tasks
- Displaying completed tasks with strikethrough text in red
- Showing the total number of completed tasks
To use this component, you would typically render it in your main App component or another parent component. Make sure to have React installed in your project before using this code.
Notis
Mini tools
