Resolving 'Invalid hook call' error in Airtable extension

Other Questions Airtable
1 
I'm stuck with an error in my Airtable extension. It says:

'Invalid hook call. Hooks can only be called inside of the body of a function component.'

I'm confused because I'm using hooks (useState and useEffect) inside a function that I believe is a React component. The extension uses the Airtable blocks API to create a dropdown that sets a state value, and then useEffect updates a database in real time.

I've heard that React version conflicts might trigger this issue, but I'm not sure how to verify it. Does anyone have any suggestions on what might be causing this error and how to fix it?

Here's a simplified version of my code:

```javascript
import React, { useState, useEffect } from 'react';
import { Select, useBase, useRecords } from '@airtable/blocks/ui';

const myBase = useBase();
const myTable = myBase.getTable('Projects');

function ProjectFilter() {
  const [selectedProject, setSelectedProject] = useState('');
  const records = useRecords(myTable);

  const projectOptions = records.map(record => ({
    value: record.getCellValue('ProjectID'),
    label: record.getCellValue('ProjectName')
  }));

  useEffect(() => {
    // Update database based on selectedProject
  }, [selectedProject]);

  return (
    <Select
      options={projectOptions}
      value={selectedProject}
      onChange={newValue => setSelectedProject(newValue)}
    />
  );
}

Can anyone spot what’s wrong?

2

The error you’re encountering is indeed tricky. I’ve dealt with similar issues in Airtable extensions. Your code structure is close, but the problem lies in where you’re calling the Airtable hooks. As RunningRiver mentioned, useBase and useRecords should be inside your component function.

Another point to consider is error boundaries. Sometimes, these errors can be masked by higher-level components. Try wrapping your ProjectFilter component in an error boundary to catch and display any errors more clearly.

Lastly, ensure your Airtable blocks SDK version is compatible with the React version you’re using. Mismatched versions can cause unexpected behavior. Check your package.json and update if necessary.

If these steps don’t resolve the issue, you might want to create a minimal reproducible example and share it on the Airtable community forums for more specific help.

3

hey there, i’ve run into this before. sounds like ur hooks are in the wrong spot. try moving useBase and useRecords inside ur ProjectFilter function. like this:

function ProjectFilter() {
const myBase = useBase();
const myTable = myBase.getTable(‘Projects’);
// rest of ur code…
}

that should fix the invalid hook call error. lmk if it works!

4

I’ve encountered this error before in my Airtable extensions, and it can be tricky to diagnose. From what I see in your code, the issue likely stems from how you’re using the Airtable hooks. The useBase and useRecords hooks should be called inside your component function, not at the top level of your module.

Try restructuring your code like this:

function ProjectFilter() {
  const myBase = useBase();
  const myTable = myBase.getTable('Projects');
  const [selectedProject, setSelectedProject] = useState('');
  const records = useRecords(myTable);

  // Rest of your component code...
}

This should resolve the ‘Invalid hook call’ error. Remember, hooks need to be called in the same order on every render, which is why they should be at the top level of your component function.

Also, make sure you’re not accidentally nesting components. If ProjectFilter is inside another component, that could cause issues too. Hope this helps!