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

there is a value (price) I'd like to save to DB by raising the onClick event. by clicking just Date and id stored in the DB, not the value. — Vahid Afshari
– Vahid Afshari, Commented Apr 10, 2022 at 7:33

Yash Jariwala · Accepted Answer · 2022-04-09 11:42:24Z

0

Try This

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

answered Apr 9, 2022 at 11:42

Yash Jariwala

513 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vahid Afshari Over a year ago

adding async-await didn't work

Collectives™ on Stack Overflow

unable to pass data via onClick event react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related