trying to calculate dates with price using React

Question

I'm trying to calculate a total price, by getting the selected dates from the check in and check out values and adding the price per day.

I can't find a solution on how I can get the value from the dates, as a numeric value.

Here's what I have tried so far:

Parse Int()
Parse Float()
Date.parse()

My code

handleChange = (e) => {
    e.preventDefault();

    this.setState({ [e.target.name]: e.target.value });

    let checkIn = Date.parse(this.state.checkin);
    let checkOut = Date.parse(this.state.checkout);

    console.log("test" + checkIn + checkOut);

    let days = Math.floor((checkOut - checkIn) / (1000 * 60 * 60 * 24));
    let totalPrice = price * days;

    localStorage.setItem("totalPrice", totalPrice);


    this.validateFormData();
  };

Check in/ out section of the form:

                <Form.Label htmlFor="checkin" className="form__label">
                  Check In
                </Form.Label>
                <input
                  name="checkin"
                  label="Next appointment"
                  type="date"
                  className="form__control"
                  required="required"
                  value={this.state.checkin}
                  onChange={this.handleChange}
                />

                {formErrors.checkin.length > 0 && (
                  <span className="[ form__error ]">
                    <i>{formErrors.checkin}</i>
                  </span>
                )}
              </Form.Group>
              <Form.Group className="form__group">
                <Form.Label htmlFor="checkout" className="form__label">
                  Check Out
                </Form.Label>

                <input
                  name="checkout"
                  label="Next appointment"
                  type="date"
                  className="form__control"
                  required="required"
                  value={this.state.checkout}
                  onChange={this.handleChange}
                />
                {formErrors.checkout.length > 0 && (
                  <span className="[ form__error ]">
                    <i>{formErrors.checkout}</i>
                  </span>
                )}
              </Form.Group>
              <p>
                TotalPrice = {localTotalPrice} Price:{" "}
                <span className="card__price--color"> {price}$</span>
              </p>

score 0 · Answer 1 · answered Jan 21 '21 at 16:53

this.setState is a asynchronous function. Hence, the changes done during this.setState({ [e.target.name]: e.target.value }); are not available immediately.

If you have to use these values, better use e.target.value directly. ANd then Date.parse should work

trying to calculate dates with price using React

1 Answers1