Updating a record from React

[Zehava_Rubin]

I am working on a custom extension with Js/React. 

I would like to update the field of a specific record when someone clicks a button.

  function updateField() {
    let table = base.getTableByNameIfExists("Dart Applicant Tracker");
    let record = useRecordById(table, "rec8XV8zW0GuGPBDX");
    table.updateRecordAsync(record, {
      "Scheduled Staff":
        base._baseData["collaboratorsById"][base._baseData["currentUserId"]][
          "email"
        ],
    });
  }

However, when I call my function I get the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

 It seems like I can't use these methods in a function. What is a workaround?

[Justin_Barrett]

The error that you're seeing is specifically related to this line:

let record = useRecordById(table, "rec8XV8zW0GuGPBDX");

useRecordById() is the hook mentioned in the "Invalid hook call" error. As mentioned in the error, hooks may only be used in the body of a function component. I'm guessing that the function you listed is inside a component, so the general solution is to move the hook outside of the function into the "root" of the component. If you could please share more about that component and how it fits into the bigger picture of your extension design, it'll be easier to be more specific with the solution.

[Zehava_Rubin]

Hi Justin, 

Thank you for responding.

In terms of the big picture. I have a button on every record in this table linking to a custom extension that I created. When a person opens up this extension I would like to be able to update a field in the table with the user information of the person who used the extension last for that specific record. 

I want to call this function - updateField() when a person clicks a specific button within the extension. When I called this function from the onClick method, that is when I got this error. 

Please let me know how I can accomplish this in another way.

Thank you!

[Justin_Barrett]

If your goal is to know who last modified the record, there are far easier ways to do that. The Last Modified By field type is the most direct. Even if a user modifies the field via an extension, a Last Modified By field would show that user. The active user would also appear in all changes shown in the record history. There's no need to have the extension write custom data to the record to capture that info.

[Zehava_Rubin]

I see what you are saying, however, its not exactly who modified the record last.

I created a custom sms messaging extension, I want to track who last messaged this person of the selected record. Not necessarily did they make any changes to the actual table while doing this. All they did was click the button on the record to open the extension and then use the extension.

[Zehava_Rubin]

@Justin_Barrett 

Are you still able to help me on this?

[Justin_Barrett]

Sorry, I've been busy the past couple of days.

Thanks for clarifying the context of this user tracking situation. Going back for a moment to the issue of updating the record, you don't actually need to use the useRecordById() hook in this case. You can just use the record ID of the triggering record to perform the update.

However, the method that you're using in your current script to collect the user information is not correct. Check the docs for the Session model to see how to do that correctly:

https://airtable.com/developers/extensions/api/models/Session

[Zehava_Rubin]

Thank you for your clarification on using the current session to the get the user.

I just wanted to know if you could clarify what you mean by this:

Going back for a moment to the issue of updating the record, you don't actually need to use the useRecordById() hook in this case. You can just use the record ID of the triggering record to perform the update.

[Justin_Barrett]

If you read the instructions for the updateRecordAsync() method, you'll notice that it says that you can pass either a record or a record ID. You'll have the record ID from whatever method you're using to capture the triggering record, so use that string variable in place of the record reference in your example above.