What is the function of async in Next.js when triggered by an onClick

Need help with calling an async function pushData() from a button onClick event

async function pushData() {
  alert("wee");
  console.log("pushing data");

  try {
    await query(`
    //SQL CODE
    `);

    console.log("Done");

  } catch (e) {

    console.error("wtf");
    console.log(e);

  }
}

import React from "react";

export default function Dashboard() {
  return (
    <div>
      <div>
        <h2>Dashboard</h2>
      </div>
      <button onClick={async () => await pushData()}>SQL BUTTON</button>
    </div>
  );
}

The alert('wee') works, but the await and console.log() are not functioning as expected.

Answer №1

In my opinion, using async and await in the onClick attribute of the button may not be necessary. A straightforward call to the pushData() function should suffice.

Answer №2

RESOLUTION

It seems that my fatigue and lapse in judgment caused the confusion. The function onClick={pushData} functions properly once I removed the unnecessary alert(). Strangely, the logs are still appearing in the DevTools console.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate button depending on MUI DataGrid selection; button remains inactive

The issue with the code above is that even though the handleSelectionModelChange function is defined to setRow for the onSelectionModelChange, the disabled button does not reflect the action of selecting a row. Below is what I have attempted so far: import ...

Channeling requests from webpack dev server to .net MVC website

I am working on incorporating Vue into my .net MVC project. After installing Vue using the CLI, I included the following vue.config.js: module.exports = { devServer: { proxy: { '/': { target: 'http://mvcsite.local', ...

Tips on changing the default value of a Material UI prop method in React JS

Currently, I'm utilizing React JS and I've brought in a component from Material UI known as (https://material-ui.com/api/table-pagination/). My goal is to customize the Default labelDisplayedRows that looks like this: ({ from, to, count }) => ...

How to convert deeply nested object structures containing arrays in JavaScript

Despite the less-than-desirable name of this inquiry, the question is fairly straightforward. I have a particular object: let test = { date1: [ { time: 1, value: 5, }, { time: 2, value: 6, }, ], date2: [ { ...

Ways to Export HTML to Document without any borders or colorful text

How can I make a contentEditable area visible when filling text and then disappear when exporting the document? I found a script online that allows you to do this, but the issue is that the contentEditable area is not visible until clicked on. To address t ...

Changing the data type of a column in an Excel file from XLSX to

I am currently working with the XLSX npm package and attempting to download a sample Excel file, add some data to it, and then upload it back. The fields in the file include MOBILE NUMBER, DATE, TIME, and NAME. When I upload the file, the values for the DA ...

Recognizing a component through various page loads

The title of this question may not be the best, but I hope my explanation clarifies what I'm trying to achieve. It's 4AM, so please forgive any confusion in my message. What I want to do is identify if a user-selected element appears on any page ...

What is the best way to deactivate the first two columns of the header in Vue?

I am attempting to deactivate the draggable function for the first 2 columns. I have tried using options in the draggable plugin. :options="{disabled : 'Subject'}" However, this disables the draggable functionality for all headers. < ...

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

The Swipe animation encountered a problem because it attempted to access an undefined object called singleValue.StopTracking

I am encountering a TypeError while trying to use the Delete on Swipe function: undefined is not an object(evaluating 'singleValue.StopTracking') The project is being run using expo When I swipe, an error is returned by expo. Clicking dismiss r ...

Issues related to validation prior to submission

Having trouble with a VeeValidate example from the documentation. The example can be found here. I seem to be missing something crucial but can't figure out what it is. For some reason, my form always validates as valid, even when no text is entered ...

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

Having trouble retrieving data when updating a user in ExpressJS

Trying to update an experience array in the User model with new data, but facing issues with saving the data in the exec function. As a result, unable to push the new data to the array on the frontend. Here is the current code snippet: router.post('/ ...

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

Having trouble with the 'npm start' command not functioning as expected, despite no visible errors being reported

Just yesterday, the npm run start command was functioning properly for my react project. However, after updating npm to version 6.13.6 today, it seems to have stopped working. Surprisingly, there are no error messages or security vulnerabilities detected. ...

Guide on implementing a template within a form using Vue.js

I have set up a Vue instance for handling the form data var formInstance = new Vue({ el: '#amount_form', data: { logdate: '', amount:'', description:'' }, methods: { ...

Is it possible to dynamically set the body id in React?

I'm currently working on implementing a dark mode feature in my app. The plan is to insert the following code into the root element: <div id="dark"> Afterwards, add the following CSS: #dark { background-color: #1A1A2E; } Subseq ...

What is the process for loading a .x model in Three.js?

Could anyone provide guidance on how to successfully load an animated .x model in Three.js? I am currently struggling with the process and have attempted to convert the .x model to collada without success. Unfortunately, my search for a free program to c ...

How can I automatically check all checkboxes in a row when a material table is loaded and uncheck them when clicked?

I have been working on a project using React Material Table and I am trying to figure out how to make the "select all" checkbox default checked when the page is loaded. Additionally, I want the ability to deselect any checkbox if needed. I attempted to use ...

Typescript is throwing an error with code TS2571, indicating that the object is of type 'unknown'

Hey there, I'm reaching out for assistance in resolving a specific error that has cropped up. try{ } catch { let errMsg; if (error.code === 11000) { errMsg = Object.keys(error.keyValue)[0] + "Already exists"; } return res.status ...