`useFieldValue`

A hook that gets the value of a field of the current record. It gets the current record from the context or use the one provided as a prop. It supports deep sources such as name.fr.

Usage

Here is an example TextField component:

// In TextField.tsx
import * as React from 'react';
import { useFieldValue, type FieldProps } from 'react-admin';

export const TextField = (props: FieldProps) => {
    const value = useFieldValue(props);
    return <span>{value}</span>;
}

// In PostShow.tsx
import { Show, SimpleShowLayout } from 'react-admin';
import { TextField } from './TextField.tsx';

export const PostShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="author.name" label="Author" />
        </SimpleShowLayout>
    </Show>
);

Params

`source`

The name of the property on the record object that contains the value to display. Can be a deep path.

import * as React from 'react';
import { useFieldValue } from 'react-admin';

export const CustomerCard = () => {
    const firstName = useFieldValue({ source: 'firstName' });
    const lastName = useFieldValue({ source: 'lastName' });
    return <span>{lastName} {firstName}</span>;
}

`record`

The record from which to read the value. Read from the RecordContext by default.

import * as React from 'react';
import { useFieldValue, useGetOne } from 'react-admin';

export const CustomerCard = ({ id }: { id: string }) => {
    const { data } = useGetOne('customer', { id });
    const firstName = useFieldValue({ source: 'firstName', record: data });
    const lastName = useFieldValue({ source: 'lastName', record: data });
    return <span>{lastName} {firstName}</span>;
}

`defaultValue`

The value to return when the record does not have a value for the specified source.

import * as React from 'react';
import { useFieldValue } from 'react-admin';

export const CustomerStatus = () => {
    const status = useFieldValue({ source: 'status', defaultValue: 'active' });
    return <span>{status}</span>;
}