I am trying to do the discounted price logic

Discount price should have the default value of actual price , because 0% discount means the discount price is same as actual price.

when i do this i am getting this error, And it is changing randomly sometimes, and most of the time it is working fine .

import React, { Fragment, useState } from "react";
 
const App = () => {
  const [price, setPrice] = useState();
  const [discountPrice, setDiscountPrice] = useState();
  const [discountRate, setDiscountRate] = useState(0);

  const submitHandler = async () => {
    console.log("hello");
  };

  return (
    <>
      <Fragment>
        <div className="row">
          <div className="col-12 col-md-10">
            <Fragment>
              <div className="wrapper my-5">
                <form
                  onSubmit={submitHandler}
                >
                  <div className="form-group">
                    <label htmlFor="price_field">Price</label>
                    <input
                     
                      value={price}
                      onChange={(e) => {
                        setPrice(e.target.value);
                        setDiscountPrice(e.target.value);
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="discounted_price">Discounted Price</label>
                    <input
                      value={discountPrice}
                      onChange={(e) => {
                        setDiscountPrice(e.target.value);
                        setDiscountRate(
                          ((price - e.target.value) / price) * 100
                        );
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="discounted_rate">Discount Rate</label>
                    <div className="input-group mb-3">
                      <input
                       value={discountRate}
                        onChange={(e) => {
                          setDiscountRate(e.target.value);
                          setDiscountPrice(
                            price - (e.target.value / 100) * price
                          );
                        }}
                      />
                    </div>
                  </div>
                </form>
              </div>
              <></>
            </Fragment>
          </div>
        </div>
      </Fragment>
    </>
  );
};

export default App;

And how to actually see if the discount price value is empty ?

i tried

discountPrice == "" || discountPrice.trim() = "" || discountPrice== null
discountPrice.trim()===""

is not working, says trim is not a function

CodePudding user response：

Add the initial value like ,

  const [price, setPrice] = useState(0);
  const [discountPrice, setDiscountPrice] = useState(0);