Skip to main content

i started an app and try to show table fields in my app
i used a code from guides as axemple, but when i request fields by their names it shows as undefined, but field record.id is displayed ok
i have table with wields Title, Price etc, but only record.id have value in app, but in table all fields have value
my code

import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';
import React from 'react';

function HelloWorldApp() {
    // YOUR CODE GOES HERE
    const base = useBase();
    const table = base.getTableByName('events');
    const records = useRecords(table);

    const events = records.map(record => {
        return (
            <div key={record.id}>
                {record.Price || 'not named record'}
            </div>
        );
    });

    return (
        <div>{events}</div>
    );
}

initializeBlock(() => <HelloWorldApp />);

Field values are not a property of the record. You have to fetch them using record.getCellValue(name or ID of the field). Airtable Blocks SDK


I don’t know what you use for development but if I may suggest VSCode with Typescript as that would have highlighted the error for you by placing a red squiggly under e.g. record.Price. Also you would have discovered the getCellValue method suggested by Kamille when you typed a dot after record.

Better tools save you a ton of time :slightly_smiling_face:


thanks, it works

strange, that in manual there is similar example with record.name, which is declared as working


thanks, it works

strange, that in manual there is similar example with record.name, which is declared as working


Both the id and name are public properties of a record, as described in the documentation.