make form just simple

components/contact.js

@@ -5,7 +5,7 @@ import Form from 'react-bootstrap/Form'
 import Col from 'react-bootstrap/Col'
 
 export default function Contact() {
-  const { state } = useContext(WizardContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { name, email, street, zip, city } = state.formData
 
@@ -13,38 +13,53 @@ export default function Contact() {
     <>
       <Form.Group>
         <Form.Label>Name</Form.Label>
-        <Form.Control type="text" id="name" placeholder="Name" value={name} />
+        <Form.Control
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={name}
+          onChange={onChangeEvent}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>E-Mail</Form.Label>
         <Form.Control
           type="email"
-          id="email"
+          name="email"
           placeholder="E-Mail"
           value={email}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label>Straße</Form.Label>
         <Form.Control
           type="text"
-          id="street"
+          name="street"
           placeholder="Straße"
           value={street}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Row>
         <Form.Group as={Col} xs={4}>
           <Form.Label>PLZ</Form.Label>
-          <Form.Control type="text" id="plz" placeholder="PLZ" value={zip} />
+          <Form.Control
+            type="text"
+            name="zip"
+            placeholder="PLZ"
+            value={zip}
+            onChange={onChangeEvent}
+          />
         </Form.Group>
         <Form.Group as={Col}>
           <Form.Label>Stadt</Form.Label>
           <Form.Control
             type="text"
-            id="city"
+            name="city"
             placeholder="Stadt"
             value={city}
+            onChange={onChangeEvent}
           />
         </Form.Group>
       </Form.Row>