The "from" field has been defined when sending a transaction, but the error still occurs

Question

Problem

I am following this tutorial on how to make a donate button on my React app. The tutorial is in HTML, however, so below is my attempt at converting it to ReactJS.

Code

App.jsx

donate = () => {
  const donationAddress = "0x...";

  web3.eth.sendTransaction({
    to: donationAddress,
    value: web3.utils.toWei("1", "ether")
  }, (err, transactionId) => {
    if (err) {
      console.log("Donation failed", err);
      alert("Donation failed.");
    } else {
      console.log("Donation successful", transactionId);
      alert("Donation successful!");
    }
  })
}

render() {
  return (
    <div>
      <p>Donate</p>
      <button onClick={this.donate}>Donate 1 wei</button>
    </div>
  );
}

I commented out the two lines of code above from the tutorial because I had received this error: TypeError: web3__WEBPACK_IMPORTED_MODULE_3__.default.toWei is not a function.

Output

Initially, I don't receive an error on the page until I click the button. Then I receive this error: The send transactions "from" field must be defined!.

It highlights this line as the error: web3.eth.sendTransaction({.

How do I fix this? Thank you!

Answer 1

Updated code. Thanks @goodvibration!

  donate = async () => {
    const donationAddress = "0x...";

    const accounts = await web3.eth.getAccounts();
    this.setState({ account: accounts[0] });

    web3.eth.sendTransaction({
      to: donationAddress,
      from: accounts[0],
      value: web3.utils.toWei("1", "ether")
    }, (err, transactionId) => {
      if (err) {
        console.log("Donation failed", err);
        alert("Donation failed.");
      } else {
        console.log("Donation successful", transactionId);
        alert("Donation successful!");
      }
    })
  }