So, this is getting pretty annoying at the moment, as it is taking me almost two days to just configure airtable post request, i have tried everything ii know and have researched online, nothing seems to change, getting the same error almost all the time
Home.js:90 POST https://api.airtable.com/v0/app5aBFbyn7WropZL/contact?api_key=keyfX7UkMiODjA6fq 422 (Unprocessable Entity)
sendData @ Home.js:90
Home.js:103 Success: {"error":{"type":"INVALID_REQUEST_UNKNOWN","message":"Invalid request: parameter validation failed. Check your request data."}}
My code
`
import React, { Component, useState } from “react”;
import axios from “axios”;
import AboutUs from “…/…/component/AboutUs”;
import { Form } from “react-bootstrap”;
import Contact from “./Airtable”;
var Airtable = require(“airtable”);
var base = new Airtable({ apiKey: --------------" }).base(
“app5aBFbyn7WropZL”
);
}
const [formData, setFormData] = useState({});
const [message, setMessage] = useState("");
const handleInput = (e) => {
const copyFormData = { …formData };
copyFormData[e.target.name] = e.target.value;
setFormData(copyFormData);
};
base(“contact”).create(
[
{
fields: {},
},
{
fields: {},
},
],
function (err, records) {
if (err) {
console.error(err);
return;
}
records.forEach(function (record) {
console.log(record.getId());
});
}
);
const sendData = async (e) => {
e.preventDefault();
try {
const response = await fetch(
“https://api.airtable.com/v0/app5aBFbyn7WropZL/contact?api_key=----------------”,
{
method: “post”,
body: JSON.stringify([formData]),
headers: {
“Content-Type”: “application/json”,
},
typecast: true,
}
);
const json = await response.json();
console.log(“Success:”, JSON.stringify(json));
setMessage(json.message);
} catch (error) {
console.error(“Error:”, error);
setMessage(“Error”);
}
};
return (
<div
id=“home”
className=“header-hero bg_cover d-lg-flex align-items-center”
style={{ backgroundImage: “url(assets/images/header-hero.jpg)” }}
>
<h1
style={{
fontFamily: Slack-Larsseit "Helvetica Neue", "Helvetica","Segoe UI",Tahoma,Arial,sans-serif,
letterSpacing: “-.8px”,
}}
>
Take the work experience around
entirely under your control.
{" “}
OneScrin is for everyone, from casual chat to high-powered
video collaboration.
<input
className=“main-btn”
type=“email”
id=“terms”
name=“email”
placeholder="workemail@email.com”
// value={this.state.email}
// onChange={this.handleChange}
onChange={handleInput}
// onChange={this.onChange}
// disabled={this.state.isCheckBoxSelected}
style={{
marginRight: “-50px”,
marginTop: “7.5px”,
color: “white”,
backgroundColor: “transparent”,
}}
/>
<button
id=“submit-form”
name=“submit”
type=“submit”
className=“main-btn”
style={{
position: “relative”,
marginLeft: “1px”,
marginTop: “7.5px”,
}}
>
Try For Free
<br />
<span
style={{
textAlign: "justify",
maxWidth: "29rem",
fontSize: "11px",
}}
>
{/* onChange={this.changeHandler} */}
<input type="checkbox" /> i would like to receive email
notifications about OneScrin and its affilliate products. By
clicking 'Sign Up', you understand and agree to the OneScrin{" "}
<a href="https://onescrin.com.ng/terms-of-service">
Terms of Service
</a>
</span>
<div>{message}</div>
</div>
</div>
</div>
<div
className="header-hero-image d-flex align-items-center wow fadeInRightBig"
data-wow-duration="1s"
data-wow-delay="1.1s"
>
<div className="image">
<img src="assets/images/home.gif" alt="Chat Room" />
</div>
</div>
</div>
<AboutUs />
<Contact />
{/* <PostLanding /> */}
</header>
</div>
);
};
export default Home;
`
