How to send data from React frontend to Express backend for Airtable record creation

Other Questions Airtable
1

I’m struggling with sending data from my React component to an Express server and then using that data to create records in Airtable. The issue seems to be related to how I’m handling the JSON data.

Here’s my React component code that sends the request:

handleFormSubmit() {
  const recordData = {
    name: 'hello',
  }
  fetch('/api/create',{
    method: 'POST',
    body: JSON.stringify(recordData),
    headers: {"Content-Type": "application/json"}
  })
}

And here’s my Express route handler:

app.post('/api/create', bodyParser, async (req, res) => { 
    const recordInfo = JSON.stringify(req.body);   
    await console.log(recordInfo); 
    base.create(recordInfo, function(error, result) {  
        if (error) {console.log(error); res.json(error)} else {console.log(result), res.json('Created!')}
    });   
})

The weird thing is that I keep getting errors from Airtable API. But when I hardcode the data like this:

base.create({"name":"hello"})

instead of using the variable recordInfo, everything works perfectly. I thought this should work based on what I’ve read in the documentation. Am I doing something wrong with the JSON parsing? Any help would be great.

2

You’re double stringifying your data. When you use JSON.stringify(req.body) in your Express route, you’re converting an already-parsed object back into a string. The Airtable API doesn’t want that - it wants the actual JavaScript object. Just pass req.body directly to base.create. The bodyParser middleware already turned it into a proper object for you. Here’s the fix:

app.post('/api/create', bodyParser, async (req, res) => { 
    const recordInfo = req.body;   
    console.log(recordInfo); 
    base.create(recordInfo, function(error, result) {  
        if (error) {console.log(error); res.json(error);} else {console.log(result); res.json('Created!');}  
    });   
})

I ran into this exact same thing a few months back with Airtable. The API wants a plain object, which is why hardcoding works but stringify doesn’t.

3

The problem’s in your Express route - you’re calling JSON.stringify(req.body). Express already gives you req.body as a JavaScript object after body-parser processes it. When you stringify it again, you’re turning it into a string that Airtable can’t handle. I’ve run into this with Airtable before - just use the object directly from the middleware. Here’s what you want: javascript app.post('/api/create', bodyParser, async (req, res) => { console.log(req.body); // Check what the object looks like base.create(req.body, function(error, result) { if (error) {console.log(error); res.json(error);} else {console.log(result); res.json('Created!');} }); }); This matches your hardcoded example and should work fine.