How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS
Published: 2022-03-02 11:11:30


I wrote about this because I was having an issue with storing users’ form data on Google Sheets in Gatsby. I saw it being done from the backend but I wanted to implement it on the frontend with little stress but it was giving me a headache so here is the ultimate solution that saved the day.

## How the solution works
The main idea of the solution was to make ReactJS, NextJS, or in this case, GatsbyJS POST form data to Google Sheets like REST APIs.

## First, Initialize Your Workspace
here is documentation on how to set up your projects in ReactJS, GatsbyJS, and NextJS

ReactJS - https://reactjs.org/docs/create-a-new-react-app.html

GatsbyJS - https://www.gatsbyjs.com/docs/tutorial/part-1/

NextJS - https://nextjs.org/docs/getting-started

But in this case, I would use GatsbyJS, If you had set up the project correctly in GatsbyJS, you would see the screen below

![How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kx4xiebn11y0nlnmuwn.png)

## Create Your Form

Well, now it’s time to create your form. I would use Material-UI for creating the form and Formik and Yup for handling and validating the form.

You can read more on the technology stack mentioned above:

Material-UI - https://mui.com

Formik  - https://formik.org/docs/overview

Yup - https://formik.org/docs/guides/validation

But you can create it with any technology stack of your choice.

## How to Post the data to Google Sheets
TO post our form data to Google Sheets will be using Stein. Stein is an open-source program to help you turn any Google Sheet into a database. And let you POST data to Google Sheets.

we also need to install the stein-js-client. Its a JavaScript client library to interact with the Stein API.

Go over to Google Sheets and open a new Spreadsheet by clicking File, then New, and then Spreadsheet.

![Emeka Ugbanu Google Sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruc6y998mfbgaw0f88lt.png)

Name the sheet to name of your choice and save.

Click the share button on the top right of your screen, and edit the permission to public.

![Emeka Ugbanu Google Sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6euwem6dv85656hz3q4.png)

Copy the link and go to https://steinhq.com and create your free account.

![Emeka Ugbanu Steinhq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg4t92d5vosiqztcqgyl.png)

Click on Create API. You'll be redirected to your details page. Here, you can see you sheet url and API url. Click on copy on API URL. This URL will be used as the endpoint for sending Requests.


![Emeka Ugbanu Steinhq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x4891hhsbtb3ifcf6zp.png)

Now, let's install stein-js-client. Type npm install stein-js-client in your terminal to install the package.

After it has been installed, import it at the top of your file. We will make the POST Request in the submitHandler function.

```
import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("url");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }
```
Replace the submitHandler function with the code above. Here, we are using stein-js-client to post the data to the URL and get back the response in the console using the .then keyword.

Paste the copied API URL endpoint from stein and replace it with the URL in new SteinStore("url").

```
import React from "react";
import SteinStore from "stein-js-client";
 const store = new SteinStore("https://api.steinhq.com/v1/storages/61eea0ad8d29ba237915e07d");

submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }
```
Now, open up Google Sheets and fill up the first columns, that is name, age, salary, and hobby. Please fill them out carefully, or else it will not work. It should be case sensitive.

![Emeka Ugbanu Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6epbdbzphxyno2cefmy.png)

Now, run your React app and fill in the input fields. You'll see that the data is getting populated into your Google Sheets.

![Emeka Ugbanu Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vl6ax90ttuo1hv0c2wn.png)

Now instead of the default values used here pass the values gotten from the form 

```
submitHandler = () => {
   store
  .append("Sheet1", [
    {
      title: values.title,
      author: values.author,
      content: values.content,
      link: values.link,
    }
  ])
  .then(res => {
    console.log(res);
  });
    })
  }
```
Now You get this

![Emeka Ugbanu Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy3m91gai3mes8jcfwc1.png)

You can read more on stein 
features:https://docs.steinhq.com/introduction

That's all for now. Now you know how How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS application.

you can follow me here on dev.to for more and on twitter [@Emeka_Ugbanu](https://twitter.com/Emeka_Ugbanu) and also thanks to [@PaulieScanlon](https://twitter.com/PaulieScanlon) for offering me help in using Gatsby Serverless Functions with Google Sheets. You can know about that [here](https://github.com/gatsby-inc/gatsby-funcjam-21-byte-size#-store-data-in-google-sheets).