Вопрос пользователя:
Ответ нейросети:
Примерный код компонента TodoList:
import React, { useState } from 'react';
import { TextField, Button, Card, CardContent, IconButton, List, ListItem, ListItemText } from '@material-ui/core';
import DeleteIcon from '@material-ui/icons/Delete';
const TodoList = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const handleAddTask = () => {
if (newTask.trim() !== '') {
setTasks([...tasks, newTask]);
setNewTask('');
}
};
const handleDeleteTask = (index) => {
const updatedTasks = tasks.filter((_, i) => i !== index);
setTasks(updatedTasks);
};
return (
<div>
<TextField
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
label="Add Task"
/>
<Button onClick={handleAddTask}>Add</Button>
<List>
{tasks.map((task, index) => (
<ListItem key={index}>
<Card>
<CardContent>
<ListItemText primary={task} />
<IconButton onClick={() => handleDeleteTask(index)}>
<DeleteIcon />
</IconButton>
</CardContent>
</Card>
</ListItem>
))}
</List>
</div>
);
};
export default TodoList;
Этот компонент позволит пользователю добавлять новые задачи, отображать их в списке и удалять по необходимости. Важно учесть, что данный код использует Material UI компоненты, поэтому перед использованием убедитесь, что они установлены в вашем проекте.
Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.