Help

Using React frontend form to connect to airtable

Topic Labels: ImportingExporting
6922 1
cancel
Showing results for 
Search instead for 
Did you mean: 
Jude
4 - Data Explorer
4 - Data Explorer

Hello I wonder if you can help

I am using a react.js form to collect customer data and would like to connect this information to Airetable. this is what I have so far:

file 1 - data file
import { useState } from “react”;
import axios from “axios”;

export default function useData() {
const [data, setData] = useState(null);

const getData = async () => {
return axios.get(“/”).then((res) => {
console.log(“res.data.records:”, res.data.records);
setData(res.data.records);
});
};
return {
getData,
data,
};
}

file 2 index.js

import React from ‘react’;

import ReactDOM from ‘react-dom/client’;

import ‘./index.css’;

import App from ‘./App’;

import axios from “axios”;

const BASE_ID = ‘xxx’;

const API_KEY = ‘xxx’

axios.defaults.baseURL = https://api.airtable.com/v0/${BASE_ID}/Contact__form/;

axios.defaults.headers.post[‘Content-Type’] = ‘application/json’;

axios.defaults.headers[‘Authorization’] = Bearer ${API_KEY};

const root = ReactDOM.createRoot(document.getElementById(‘root’));

root.render(

<React.StrictMode>

</React.StrictMode>

);

I’m not sure if I am going in the right direction, or what to do next. Thank you.

1 Reply 1

@Jude - a couple of tutorials for this: