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:

• 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:

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>);...