I have a reservation form which contains the time of the beginning of the reservation and the period of reservation.

The period will not be sent to the backend only the time of the beginning and the end will be sent, so the end of the reservation will be calculated at the frontend and then it's gonna be sent with the time of beginning.

I'm having a problem with how to add the period to the beginning of reservation with react js.

my code:

function ReservePlace(props) {
    const initialInputValues = {
       period: '',
       beginReservation: ''
    } 
    const [values, setValues] = useState(initialInputValues)
    const handleInputChange = (e) => {
      const name = e.target.name
      const value = e.target.value
      setValues({
        ...values,
        [name]: value,
      })
    }    
    const sendUserReservation = async (e) => {
      e.preventDefault()
      await axios.post('/users/reservation', {
        ...values,
        endReservation: addHours(values.beginReservation, values.period),
      })  
      
      }
    return (
              <form >
                  <label>Enter the reservation start time</label>
                  <input name="beginReservation" value={values.beginReservation} onChange={handleInputChange}  type="time"/>

                  <label>Enter the period</label>
                  <input name="period" value={values.period} onChange={handleInputChange}  type="number" min={1} max={6}  />

                  <button className='btn-reserve' onClick={sendUserReservation}  type="submit" > 
                    Reserve
                  </button>
                </form>
              
    );
}

export default ReservePlace;

CodePudding user response：

Since the input of type time returns a value of type string we can split this value and extract hours from it:

time.split(":")[0]

Then we convert this value and the value we get from a period input to type number and make calculations:

const endHours = Number(time.split(":")[0])   Number(period);

On top of that we check that the result isn't bigger than 24:

const formattedEndHours = endHours >= 24 ? endHours - 24 : endHours;

Afterwards, we create a new string which will be the end of the reservation and we can use this value to send to the server, display in UI etc:

const end = formattedEndHours.toString().concat(":").concat(endMinutes);
setEndOfReservation(end);

The whole code:

const [time, setTime] = useState<any>("");
  const [period, setPeriod] = useState<any>(0);
  const [endOfReservation, setEndOfReservation] = useState<any>("");

  useEffect(() => {
    if (time !== "" && period !== 0) {
      const endHours = Number(time.split(":")[0])   Number(period);
      const formattedEndHours = endHours >= 24 ? endHours - 24 : endHours;
      const endMinutes = time.split(":")[1];
      const end = formattedEndHours.toString().concat(":").concat(endMinutes);
      setEndOfReservation(end);
    }
  }, [time, period]);

  return (
    <form>
      <div>
        <label>Enter the reservation start time</label>
        <input
          name="beginReservation"
          value={time}
          onChange={(e) => setTime(e.target.value)}
          type="time"
        />
      </div>
      <div>
        <label>Enter the period</label>
        <input
          name="period"
          value={period}
          onChange={(e) => setPeriod(e.target.value)}
          type="number"
          min={1}
          max={6}
        />
      </div>
      <div>
        <p>End of reservation:{endOfReservation}</p>
      </div>
    </form>
  );

Demo