unable to pass data via onClick event react

Question

I tried to send "price" by clicking on the button to MongoDB. the backend works fine because I'm able to store data via postman,

the React Code:

import axios from "axios";
const Package = (props) => {
//const [price, setPrice] = useState();
//console.log(price);
const handlePayment = (e) => {
console.log(e);
const result = axios.post("http://localhost:3000/pay", e);
console.log(result);
};
return (
<>
  <div className="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto">
    <div className="pricing-item">
      <div className="pt-4 pb-3">
        <h4>{props.name}</h4>
      </div>

      <div className="pricing-price pb-1 text-primary color-primary-text ">
        <h1>
          <span>{props.price}</span>
        </h1>
      </div>
      <div className="pricing-description">
        <ul className="list-unstyled mt-3 mb-4"></ul>
      </div>
      <div className="pricing-button pb-4">
        <button
          onClick={() => handlePayment(props.price)}
          type="button"
          className="btn btn-lg btn-primary w-75"
        >
          Buy
        </button>
      </div>
    </div>
  </div>
</>
);
};

However, the only thing stored in the DB via React is Date and Id.

Please give me some advice to pass the right data to DB

Answer 1

Try This

const handlePayment = async (e) => {
   console.log(e);
   const result = await axios.post("http://localhost:3000/pay", e);
   console.log(result);
};