DEV Community

loading...

Fetch & display data using the Airtable API and React

michaelburrows profile image Michael Burrows Originally published at w3collective.com ・3 min read

In this tutorial we’ll be using Airtable as a data source for a simple React application. If you’re not familiar with Airtable they describe themselves as having the power of a database with the familiarity of a spreadsheet. If you know your way around spreadsheets you’ll have no troubles working with Airtable.

The completed source code can be found on GitHub:

GitHub logo w3collective / react-airtable

Fetch & display data using the Airtable API and React.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied…

We’ll start with the Airtable setup before moving onto the code. Sign up for a new Airtable account if you haven’t already. Feel free to use this referral link and I’ll receive $10 in Airtable credit.

Airtable is quite simple to use so you may just want to import the data I used when creating this tutorial from here. Otherwise the steps involved in setting up the data are as follows:

  • Create a new base (Airtable’s name for a database).
  • Change the title and table name to recipes.
  • Rename the first field (Name) to recipe.
  • Delete the Notes, Attachments, & Status fields.
  • Add new url & photo fields.

Here’s what my base looked like after being populated with some data:

Alt Text

We can now move onto creating the component to display this data in React. We’ll use Create React App to setup the development environment but this component can easily be dropped in an exiting application:

npx create-react-app react-airtable
Enter fullscreen mode Exit fullscreen mode

Next create a new Recipes.js file in the /src directory with the imports:

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

const Recipes = () => {
  //...
  return (<div/>);
}

export default Recipes;
Enter fullscreen mode Exit fullscreen mode

First up in the Recipes function we’ll define the variables for the useState Hook:

const [recipes, setRecipes] = useState({});
Enter fullscreen mode Exit fullscreen mode

We’l then use the Fetch API inside a useEffect Hook to retrieve the data:

useEffect(() => {
  fetch("https://api.airtable.com/v0/appM9q6JTxRolaNCN/recipes?api_key=YOUR_API_KEY")
    .then((res) => res.json())
    .then((data) => {
      setRecipes(data.records);
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);
Enter fullscreen mode Exit fullscreen mode

To get the URL used in the fetch request you first need to generate an API key on the Account page, be sure to keep this secure. Next visit the API dashboard and select your base. Scroll to the “Authentication” section and copy the example query parameter.

If the request was successful you’ll be able to see the data logged in the console:

Alt Text

With the data fetched and saved we can loop through each of the records and wrap the data inside some HTML markup. You could replace the “Fetching Data…” text here with an animated pre-loader for something more visually appealing:

return (
  <div>
    {recipes.length > 0 ? (
      recipes.map((record) => (
        <a href={record.fields.url} key={record.id}>
          <img src={record.fields.photo[0].url} alt={record.fields.recipe} />
          <p>{record.fields.recipe}</p>
        </a>
      ))
    ) : (
      <p>Fetching Data...</p>
    )}
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Finally load the component by modifying App.js as follows:

import "./App.css";
import Recipes from "./Recipes";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Recipes />
      </header>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

That’s all for this tutorial. Although this project was very basic it serves as a solid foundation for building more complex applications using React & Airtable. If you want to see the full capabilities of Airtable browse the pre-built templates for inspiration.

Discussion (0)

pic
Editor guide