Ich möchte mein Programm verbessern, bei dem es um eine React Tasklist geht ⇐ JavaScript

[Anonymous]

Wir müssen ein Programm für die Schule erstellen, es funktioniert einwandfrei. Ich überlasse Gemini einige Kommentare, sie sind jedoch auf Deutsch, ich könnte sie jedoch bei Bedarf in Englisch ändern. Ich würde gerne wissen, wie ich es verbessern könnte. Leider funktioniert die Codeblock-Funktion überhaupt nicht oder vielleicht bin ich einfach zu dumm, sie zu verwenden
App.jsx

Code: Select all

import { useState } from 'react';
// Komponenten importieren
import TaskInput from './components/TaskInput';
import TaskList from './components/TaskList';
import './App.css';

// Starte mit einer kleinen Beispieldatenmenge
const initialTasks = [
{ id: 1, name: 'Learn React', completed: true },
{ id: 2, name: 'Build a To-Do App', completed: false },
{ id: 3, name: 'Do homework', completed: false },
{ id: 4, name: 'Gemma Spar', completed: false },
];

function App() {
const [tasks, setTasks] = useState(initialTasks);
// Wir nutzen Math.max, um sicherzustellen, dass die ID immer höher ist als die höchste existierende ID
const [nextId, setNextId] = useState(Math.max(...initialTasks.map(t => t.id)) + 1);

// FUNKTION ZUM HINZUFÜGEN EINES TASKS (Wird an TaskInput übergeben)
const addTask = (name) => {
const newTask = {
id: nextId,
name: name,
completed: false,
};
// Fügt den neuen Task zum State hinzu (Immer neues Array erstellen!)
setTasks([...tasks, newTask]);
setNextId(nextId + 1);
};

// FUNKTION ZUM [url=viewtopic.php?t=12045]ÄNDERN[/url] DES STATUS (Wird an TaskList übergeben)
const toggleTask = (id) => {
// mapped über das Array und ändert nur den Task mit der passenden ID
setTasks(
tasks.map((task) =>
task.id === id
? { ...task, completed: !task.completed } // Ändert 'completed' auf das Gegenteil
: task // Alle anderen Tasks bleiben unverändert
)
);
};

return (

To-Do List App

{/* 1. Eingabefeld */}


{/* 2. Taskliste */}


);
}

export default App;

Task2.jsx

Code: Select all

// src/components/Task2.jsx
// Die Komponente ist für die Darstellung eines einzelnen To-Do-Eintrags verantwortlich.

// Empfängt task (das Objekt) und toggleTask (die Funktion) als Props
// 'task' enthält die Daten (id, name, completed) für diesen Task.
// 'toggleTask' ist die Funktion aus App.jsx, um den Status zu ändern.
function Task({ task, toggleTask }) {
return (
// Startet den JSX-Rückgabewert (die Darstellung im Browser).
// Definiert den Container für den Task (Checkbox und Text).

 toggleTask(task.id)}
/>


{task.name}


);
}

// Stellt die Komponente für andere Dateien zur Verfügung (z.B.  TaskList.jsx).
export default Task;

Tasklist.jsx

Code: Select all

// src/components/TaskList.jsx
import Task from './Task2'; // Importiere die Task-Komponente

// Empfängt tasks (das Array) und toggleTask (die Funktion) als Props
function TaskList({ tasks, toggleTask }) {
return (

{/* Iteriert (mapped) über das Task-Array */}
{tasks.map((task) => (

))}

);
}

export default TaskList;

Taskinput.jsx

Code: Select all

// src/components/TaskInput.jsx

// Importiert den 'useState'-Hook
import { useState } from 'react';

// Funktionale Komponente, die 'addTask' als Prop empfängt.
function TaskInput({ addTask }) {
const [taskName, setTaskName] = useState('');

const handleAddTask = () => {
if (taskName.trim() === '') return;

addTask(taskName);
setTaskName('');
};

return (

 setTaskName(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleAddTask();
}
}}
/>
Add Task

);
}

export default TaskInput;