Problem with fetching fields from table

[vei_tsi]

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 />);

[Kamille_Parks · Accepted solution]

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

[Raminder_Singh]

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:

[vei_tsi]

thanks, it works

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

[kuovonne]

vei_tsi:

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.