In this tutorial we will make Feedback form React app and we will send form data to Google Sheets. We will use NoCodeAPI to integrate Google Sheets with our app.

We will use free plan of NoCodeApi for this tutorial which allows us to make 300 requests / month

Goto NoCodeAPI and create an account, start with free plan. In your dashboard, click on View Marketplace, here find Google Sheets and activate it.

Now create a blank Google Spreadsheet, copy the sheet id from url, it will be after /spreadsheets/d/sheet-id/...

Now in NoCodeAPI dashboard, click on Google Sheets and then click Make Google Sheets API. Provide a sheet name, it can be anything and after that in sheet id field paste the sheet id you copied from google spreadsheet url and finally click Create. Once its created you will see an endpoint in your dashboard.

In your react app, create a form with any number of fields you like. For this tutorials lets create 3 fields name, email and message. name and email will be input fields and message will be textarea.

after that

import { useState } from 'react'

after that create state to handle name, email and message

const [data, setData] = useState({
  name: "",
  email: "",
  message: "",
})
const { name, email, message } = data

here after creating the state I have destructured values out of it. Form will be something like that.

<form onSubmit={handleSubmit}>
  <input type="text" name="name" value={name} onChange={handleChange} />
  <input type="text" name="email" value={email} onChange={handleChange} />
  <textarea
    name="message"
    value={message}
    onChange={handleChange}
  />
  <div>
    <button>Submit</button>
  </div>
</form>

we have attached value and onChange attributes to every field. Now lets create handleChange function

const handleChange = e =>
  setData({ ...data, [e.target.name]: e.target.value })

and finally we will create handleSubmit function

const handleSubmit = async e => {
  e.preventDefault()
  try {
    await fetch("nocode-endpoint?tabId=Sheet1", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify([[name, email, message]]),
    })
  } catch (err) {
    console.log(err)
  }
}

so here in fetch function provide the endpoint from your NoCodeAPI dashboard and after that attach tab id, in this case its Sheet1. You will find the tab id at the bottom of your spreadsheet.

In fetch body you can see we are providing data in form of 2D array because NoCodeAPI expects data in this form.

Run your react app and try submitting the form. Once its submitted, check your spreadsheet you will see a new entry there.