An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
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>);...
Original Link: https://dev.to/michaelburrows/build-a-react-component-that-pulls-data-from-google-sheets-5237
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To