Hello all, I am a learning developer so hopefully my code is not too confusing.
I want to create a form in React that feeds data onto Airtable. Using the Airtable SDK I am able to do it when I insert the API key into the code.
const base = new Airtable({ apiKey: API_KEY }).base(
"base-name"
)
However, if I use process.env.AIRTABLE_API_KEY it gives an error saying: Uncaught Error: An API key is required to connect to Airtable.
import { useState } from 'react';
require('dotenv').config()
const Airtable = require('airtable');
const base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(
"base-name"
)
const table = base("table-name")
const Form = () => {
const [firstNameInput, setFirstNameInput] = useState('');
const [lastNameInput, setLastNameInput] = useState('');
const [emailInput, setEmailInput] = useState('');
const [interestInput, setInterestInput] = useState('');
const [phoneInput, setPhoneInput] = useState('');
const resetForm = () => {
setFirstNameInput('');
setLastNameInput('');
setEmailInput('');
setInterestInput('');
setPhoneInput('');
}
const createData = async () => {
try {
const createdRecord = await table.create([
{
fields: {
firstName: firstNameInput,
lastName: lastNameInput,
email: emailInput,
interest: interestInput,
phone: phoneInput
}
},
])
return createdRecord
} catch (err) {
console.error(err)
}
}
const handleSubmit = async (e) => {
e.preventDefault()
try {
await fetch(createData(), {
method: "POST",
body: JSON.stringify({
firstName: firstNameInput,
lastName: lastNameInput,
email: emailInput,
interest: interestInput,
phone: phoneInput,
}),
})
resetForm()
} catch (err) {
console.error(err)
}
}
return (
<div className='section section-center'>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstNameInput">
Add First Name:
</label>
<input
required
type="text"
name="firstName"
value={firstNameInput}
placeholder="Add First Name"
onChange={(e) => setFirstNameInput(e.target.value)}
/>
<label htmlFor="lastNameInput">
Add Last Name:
</label>
<input
required
type="text"
name="lastNameInput"
value={lastNameInput}
placeholder="Add Last Name"
onChange={(e) => setLastNameInput(e.target.value)}
/>
<label htmlFor="emailInput">
Add Email:
</label>
<input
required
type="text"
name="emailInput"
value={emailInput}
placeholder="Add Email"
onChange={(e) => setEmailInput(e.target.value)}
/>
<label htmlFor="interestInput">
Add Interest:
</label>
<div className="radioGroup">
<input type="radio" value="Consulting" name="interestInput" id="Consulting" onChange={(e) => setInterestInput(e.target.value)} />
<label htmlFor="Consulting"> Consulting </label>
<input type="radio" value="Security" name="interestInput" id="Security" onChange={(e) => setInterestInput(e.target.value)} />
<label htmlFor="Security"> Security </label>
<input type="radio" value="Other" name="interestInput" id="Other" onChange={(e) => setInterestInput(e.target.value)} />
<label htmlFor="Other"> Other </label>
</div>
<label htmlFor="phoneInput">
Add Phone Number:
</label>
<input
required
type="text"
name="phoneInput"
value={phoneInput}
placeholder="Add Phone Number"
onChange={(e) => setPhoneInput(e.target.value)}
/>
</div>
<button
type="submit"
>
Submit
</button>
</form>
</div>
)
}
export default Form
When using process.env.AIRTABLE_API_KEY in a different component that only fecthes data using axios, it is able to to read.
Any help would be greatly appreciated. Thank you!