pfadi-bussle/components/contact.js

import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'

import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'

export default function Contact() {
  const { state, dispatch } = useContext(AppContext)

  const { multipleDays, startDate, endDate } = state

  if (!startDate || (multipleDays && !endDate)) {
    return null
  }

  return (
    <>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control type="text" id="name" placeholder="Name" />
      </Form.Group>
      <Form.Group>
        <Form.Label>Straße</Form.Label>
        <Form.Control type="text" id="street" placeholder="Straße" />
      </Form.Group>
      <Form.Row>
        <Form.Group as={Col} xs={4}>
          <Form.Label>PLZ</Form.Label>
          <Form.Control type="text" id="plz" placeholder="PLZ" />
        </Form.Group>
        <Form.Group as={Col}>
          <Form.Label>Stadt</Form.Label>
          <Form.Control type="text" id="city" placeholder="Stadt" />
        </Form.Group>
      </Form.Row>
      <Form.Group>
        <Form.Label>Verein</Form.Label>
        <Form.Control type="text" id="org" placeholder="Verein" />
      </Form.Group>
      <Form.Group>
        <Form.Label>Zweck der Fahrt</Form.Label>
        <Form.Control type="text" id="purpose" placeholder="Zweck der Fahrt" />
      </Form.Group>
      <Form.Group>
        <Form.Label>Ziel der Fahrt</Form.Label>
        <Form.Control type="text" id="destination" placeholder="Fahrtziel" />
      </Form.Group>
    </>
  )
}