CODEWITHSUNDEEP
conditional-statementsreact-admin
William Schroeder McKinley
William Schroeder McKinley

Reputation: 768

How do you conditionally show fields in "Show" component in react-admin?

Some fields I want to only show if they have a value. I would expect to do this like so:

<Show {...props} >
  <SimpleShowLayout>
    { props.record.id ? <TextField source="id" />: null }
  </SimpleShowLayout>
</Show>

But that doesn't work. I can make it somewhat work by making each field a higher order component, but I wanted to do something cleaner. Here's the HOC method I have:

const exists = WrappedComponent => props => props.record[props.source] ?
  <WrappedComponent {...props} />: null;

const ExistsTextField = exists(TextField);

// then in the component:

<Show {...props} >
  <SimpleShowLayout>
    <ExistsTextField source="id" />
  </SimpleShowLayout>
</Show>

This correctly shows the value, but strips the label.

Upvotes: 4

Views: 8482

Answers (2)

Diego Gon&#231;alves
Diego Gon&#231;alves

Reputation: 49

Maybe this way can be useful

import { FormDataConsumer } from 'react-admin'

<FormDataConsumer>
    {
      ({ formData, ...rest}) => formData.id &&
        <>
          <ExistsTextField source="id" />
        </>
    }
</FormDataConsumer>

Upvotes: 0

Gildas Garcia
Gildas Garcia

Reputation: 7066

We need to update our documentation about this. In the mean time, you can find informations about how to achieve that in the upgrade guide: https://github.com/marmelab/react-admin/blob/master/UPGRADE.md#aor-dependent-input-was-removed

Here's an example:

import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';

const UserShow = props => (
    <ShowController {...props}>
        {controllerProps => 
            <ShowView {...props} {...controllerProps}>
                <SimpleShowLayout>
                    <TextField source="username" />
                    {controllerProps.record && controllerProps.record.hasEmail && 
                        <TextField source="email" />
                    }
                </SimpleShowLayout>
            </ShowView>
        }
    </ShowController>
);

Upvotes: 12

Related Questions