Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 17, 2020 12:13 am GMT

Build a React component that pulls data from Google Sheets

Google Sheets can be used to provide a makeshift database thats easy to modify for non-developers.

Its not the best solution for high traffic sites but works well for internal websites or when prototyping an app.

In this tutorial well be using Tabletop.js to load data from a Google Sheet into a React component.

Lets start by installing Tabletop.js into our React project using NPM:

npm install tabletop

For this tutorial Ive created a simple spreadsheet with the following data:

Alt Text

  • All columns must have a name in the first row and not contain any weird characters (%).
  • Google assumes an empty row is the end of the data and doesnt return any rows thereafter.

Once the sheet is complete select File -> Publish to web so it becomes publicly visible.

Now for the code, create a file named MovieData.js and import React (well be using hooks) and Tabletop:

import React, { useEffect, useState } from "react";import Tabletop from "tabletop";

Next create a MovieData() function and declare a variable that will store the data in a useState hook:

function MovieData() {  const [data, setData] = useState({}); }export default MovieData;

We can now fetch the data using Tabletop inside a useEffect hook by adding the following to MovieData():

... useEffect(() => {  Tabletop.init({    key: "1SJ8LxWmaxKBTgDJLvfD9NZLctBT931x19--qH2yLxck",    simpleSheet: true,  }).then(function (data) {    setData(data);  });}, []);const movies = Array.from(data);  ...

key: is taken from the following section of the Google Sheet URL:

Alt Text

Finally lets return the movie data in an unordered list by adding the following to the end of MovieData():

... return (  <ul>    {movies.map((el) => (      <li key={el.movie}>        {el.movie} ({el.year}) - Rating {el.rating}      </li>    ))}  </ul>);...

Original Link: https://dev.to/michaelburrows/build-a-react-component-that-pulls-data-from-google-sheets-5237

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To