Im a React Beginner and need to know how to Lift up State from my form

Question

So ive got a Booking component which returns a form which lets you choose number of Guests, Time, Occasion and a Date, but i need a way to lift the State up from this component so that i can use it in the future with an API.

I think i dont have the knowledge of the right Syntax or correct way of putting this component and its state. Ive been trying to Code it but the only thing i came up with is this:

import React from 'react'
import { useState } from 'react';



const availableTimes = [
  {value: "17:00", text: "17:00"},
  {value: "18:00", text: "18:00"},
  {value: "19:00", text: "19:00"},
  {value: "20:00", text: "20:00"},
  {value: "21:00", text: "21:00"},
  {value: "22:00", text: "22:00"},
]

const Guests = [
  {value: "1", text: "1"},
  {value: "2", text: "2"},
  {value: "3", text: "3"},
  {value: "4", text: "4"},
  {value: "5", text: "5"},
  {value: "6", text: "6"},
  {value: "7", text: "7"},
  {value: "8", text: "8"},
  {value: "9", text: "9"},
]

const Occasion = [
  {value: "Birthday", text: "Birthday"},
  {value: "Anniversary", text: "Anniversary"},
]

const Select = ({value, options, onChange}) => {
  return(
    <select value={value}  onChange={onChange}>
      {options.map(option => {
          return(<option key={option.value} value={option.value}>{option.text}</option>)
      })}
    </select>
  )
}

const Bookingform = () => {
  const[resdate, setResdate] = useState("");
  const[guests, setGuests] = useState("");
  const[occasion, setOccasion] =useState("");
  const[restime, setRestime] = useState("");




  const handleSubmit = (e)  => {
    e.preventDefault();
    const data = {
      Reservation_Time: restime,
      Occasion: occasion,
      Guests: guests,
      Reservation_Date: resdate
    }


    const json = JSON.stringify(data);
    console.clear()
    console.log(json)
    setResdate("");
    setRestime("");
    setGuests("");
    setOccasion("");
    console.log("Form submitted!");
  }



  return (
    <>
      <div className='BookingForm'>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <div className='Field'>
              <field>
              <label htmlFor='res-date'>Choose Date</label>
                <input  id="res-date" type="date" placeholder='res-date' name='res-date' value={resdate} onChange={(e)=> setResdate(e.target.value)}/>

              <label htmlFor='res-time'>Choose time:</label>
                <Select id="restime" placeholder="restime" name="restime" value={restime} options={availableTimes} onChange={(e) => setRestime(e.target.value)} />


              <label htmlFor="guests">Number of Guests</label>
                <Select id="guests" placeholder='guests' name='guests' value={guests} options={Guests} onChange={(e) => setGuests(e.target.value)}/>

              <label htmlFor="occasion">Occasion</label>
                <Select id="occasion" placeholder='occasion' name="occasion" value={occasion} options={Occasion} onChange={(e) => setOccasion(e.target.value)}/>
              </field>
            </div>
            <button type='submit'>Submit</button>
          </fieldset>

        </form>
      </div>
    </>
  )
}

export default Bookingform

Answer 1

I think you should read this article:
https://dev.to/smeijer/simple-form-handling-in-react-o72

But a better way than what you have written is using FormData :

function MyForm() {
  const handleSubmit = (event) => {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const values = Object.fromEntries(data.entries());

    if (!Number(values.age)) {
      alert('Your age must be a number');
      return;
    }

    console.log('submitting', values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Hi!</h1>

      <p>Enter your name:</p>
      <input type="text" name="username" />

      <p>Enter your age:</p>
      <input type="text" name="age" />

      <br /><br />
      <input type="submit" />
    </form>
  );
}

Obviously a much better way would be to create a Hook for yourself using FormData which you can see a full example of it in the article I mentioned above.