Had To Move Some code because states wont work otherwise

anwendung/src/components/CourseNameInput.jsx

@@ -1,8 +0,0 @@
-export default function CourseNameInput(){
-    return(
-        <>
-            <h3>Kursname</h3>
-            <input className="courseNameInput"/>
-        </>
-    )
-}

anwendung/src/components/InputForm.jsx

@@ -1,33 +1,43 @@
-import CourseNameInput from "@/components/CourseNameInput";
-import SemesterRangeInput from "@/components/SemesterRangeInput";
-import InputFormButtons from "@/components/InputFormButtons";
 import DozentSelector from "@/components/DozentSelector";
 import Button from "@/components/Button";
 import {useRouter} from "next/router";
+import {useState} from "react";
 
 export default function InputForm() {
 
     const router = useRouter();
 
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
+    const [courseName, setCourseName] = useState("");
+
+    function onCreateClicked()
+    {
+        console.log(startDate)
+        console.log(endDate)
+        console.log(courseName)
+    }
+
     return (
         <>
             <div className="inputForm round-border">
-                <CourseNameInput/>
+                <h3>Kursname</h3>
+                <input className="courseNameInput" value={courseName} onChange={(e) => setCourseName(e.target.value)}/>
                 <div className="semesterRangeInput">
                     <div className="semesterDateLables">
                         <p className="semesterDateLable">Semesterstart</p>
                         <p className="semesterDateLable">Semesterende</p>
                     </div>
                     <div className="semesterDateInputPair">
-                        <input type="date" id="start" name="trip-start"/>
+                        <input type="date" id="start" name="trip-start" value={startDate} onChange={(e) => setStartDate(e.target.value)}/>
                         <p className="inputFieldSeperator">-</p>
-                        <input type="date" id="start" name="trip-start"/>
+                        <input type="date" id="start" name="trip-start" value={endDate} onChange={(e) => setEndDate(e.target.value)}/>
                     </div>
                 </div>
                 <DozentSelector/>
                 <div id="buttons">
                     <Button color="red" width="100px" height="30px" text="Abbrechen" onClick={() => {router.back()}}/>
-                    <Button color="green" width="100px" height="30px" text="Erstellen"/>
+                    <Button color="green" width="100px" height="30px" text="Erstellen" onClick={() => {onCreateClicked()}}/>
                 </div>
             </div>
         </>

anwendung/src/components/SemesterRangeInput.jsx

@@ -1,8 +0,0 @@
-export default function SemesterRangeInput(){
-
-    return(
-        <>
-
-        </>
-    )
-}