Storing react form data to google sheet

Asked
Active3 hr before
Viewed126 times

8 Answers

react
90%

Include the Google Sheets API Javascript,Create an OAUTH Client ID,Create a blank Google Sheet

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow ,Thanks for contributing an answer to Stack Overflow!

Thereby, to pass the values as a row instead of a column the format should be:

"values": [
   [
      "Adnan1",
      "Adnan2",
      "Adnan3"
   ]
load more v
72%

Posting data to API's has never been easy. But have you ever used React to post form data to Google Sheets? If not, then this tutorial is for you.,Today, we are going to talk about how to POST form data from React to Google Sheets like REST APIs.,Now, run your React app and fill in the input fields. You'll see that the data is getting populated into your Google Sheets one by one.

To install Semantic UI in your React application, use the following command:

npm install semantic - ui - react semantic - ui - css

After it has done installing, open the index.js file and import the following at the top:

import 'semantic-ui-css/semantic.min.css'
import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  render() {
    return (
      <Container fluid className="container">
        <Header as='h2'>React Google Sheets!</Header>
        <Form className="form">
          <Form.Field>
            <label>Name</label>
            <input placeholder='Enter your name' />
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder='Enter your age' />
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder='Enter your salary' />
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder='Enter your hobby' />
          </Form.Field>
          
          <Button color="blue" type='submit'>Submit</Button>
        </Form>
      </Container>
    )
  }
}
.form {
   width: 500 px;
}

.container {
   padding: 20 px
}

First of all, let's create states for our four form fields in the constructor.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       name: '',
       age: '',
       salary: '',
       hobby: ''
    }
  }

  changeHandler = (e) => {
    this.setState({[e.target.name] : e.target.value})
  }

  submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
  }
  
  render() {
    const { name, age, salary, hobby } = this.state;    (*)
    return (
      <Container fluid className="container">
        <Header as='h2'>React Google Sheets!</Header>
        <Form className="form" onSubmit={this.submitHandler}>
          <Form.Field>
            <label>Name</label>
            <input placeholder='Enter your name' type="text" name = "name" value = {name} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder='Enter your age' type="number" name = "age" value = {age} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder='Enter your salary' type="number" name = "salary" value = {salary} onChange={this.changeHandler}/>
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder='Enter your hobby' type="text" name = "hobby" value = {hobby} onChange={this.changeHandler}/>
          </Form.Field>
          
          <Button color="blue" type='submit'>Submit</Button>
        </Form>
      </Container>
    )
  }
}
submitHandler = e => {
   e.preventDefault();
   console.log(this.state);

   axios.post('url', this.state)
      .then(response => {
         console.log(response);
      })
}
submitHandler = e => {
   e.preventDefault();
   console.log(this.state);

   axios.post('https://sheet.best/api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
      .then(response => {
         console.log(response);
      })
}
load more v
65%

o add data to the Google Sheet, simply POST data to this URL, passing in thetabId ( name of subsheet ) as a parameter.,The data in the above sandbox is added to this Google Sheet :,Now, when you submit some data through the form, it will appear in your Google Sheet!

import React, { useState } from "react";

export default function Contact() {
    const [formData, setFormData] = useState({});
    const [message, setMessage] = useState("");

    const handleInput = e => {
        const copyFormData = { ...formData };
        copyFormData[e.target.name] = e.target.value;
        setFormData(copyFormData);
    };

    const sendData = async e => {
        e.preventDefault();
        const {name, email, message} = formData
        try {
            const response = await fetch(
                "<your_google_sheet_nocodeapi_endpoiint>?tabId=Feedback",
                {
                    method: "post",
                    body: JSON.stringify([[name, email, message]]),
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            const json = await response.json();
            console.log("Success:", JSON.stringify(json));
            setMessage("Success");
        } catch (error) {
            console.error("Error:", error);
            setMessage("Error");
        }
    };

    return (
        <div className="App">
            <form
                className="input-form"
                id="contact"
                name="contact"
                required
                onSubmit={sendData}
            >
                <input
                    name="name" 
                    type="text"
                    placeholder="Name"
                    required
                    onChange={handleInput}
                />
                <input
                    name="email"
                    type="email"
                    placeholder="Email"
                    required
                    onChange={handleInput}
                />
                <textarea
                    name="message"
                    placeholder="Message"
                    onChange={handleInput}
                />
                <input name="submit" type="submit" value="Send" />
                {message}
            </form>
        </div>
    );
}
75%

Last but not least, we’ll outline how the form data can be saved to a Google spreadsheet (or any storage service accessible through a URL) – as a quick and minimalist approach to handling registrations, subscriptions and the like on a small scale.,If you have a Google account, the easiest way to store form data is to send it to a Google sheet. This is what needs to be done to achieve this:,Create a Google sheet for storing the form data. Make the sheet public by granting everyone write access.

// src/Widgets/SubscriptionFormWidget/SubscriptionFormWidgetClass.js

import * as Scrivito from 'scrivito';
Scrivito.provideWidgetClass('SubscriptionFormWidget', {
   attributes: {
      buttonText: 'string',
      confirmationText: 'string',
   },
});
load more v
40%

Posting data to API’s has never been easy. But have you ever used React to post form data to Google Sheets? If not, then this tutorial is for you.,Today, we are going to talk about how to POST form data from React to Google Sheets like REST APIs.,Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

The constructor() method is super useful for binding different states of an object. Since there is no event happening (like a click or request from user) I am leaving it as is. ,This was a fun project. I look forward to designing more interactive applications with React and Pages. I also look forward to exploring what else I can add to the ReadingList application to make it more informative and user friendly. ,There are several websites filled with examples of React applications. Some of the popular ones are listed below.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

By default, withGoogleSheets is shipped with a very basic component to render in case fetching the data from Google Sheets API was unsuccessful (incorrect permissions, quota reached, etc.). This HOC allows for this default component to be customized as well as replaced by an entirely different custom component.,withGoogleSheets is a Higher-Order Component that makes it super easy to fetch the data from a specific sheet(s) from the context (done via the GoogleSheetsProvider) and make it available for a component via props.,Metis is a Higher-Order Component (HOC) that allows React Apps to use Google Sheets as a Makeshift Database. And in case you were wondering, Metis is named after the Greek Goddess of Wisdom. There are two main components of Metis: GoogleSheetsProvider and withGoogleSheets.

Installation

npm install react - db - google - sheets--save
load more v

Other "react-undefined" queries related to "Storing react form data to google sheet"