Conditional Rendering of sources in REACT-ADMIN?

React Guy 0
Viewed 39

how can I check if a source exists??? QUESTION ABOUT CONDITIONAL RENDERING OF SOURCES IN REACT-ADMIN

Check out my frontend:

Sometimes, the source "dateStart" is stored as:

 {
report_request: {
  dateStart: 'whatever1'
dateEnd: 'watever2'
}
}

and OTHER TIMES, they are stored as:

 {
report_request: 
{dates: {
 dateStart: 'whatever1'
dateEnd: 'watever2'}
}
}

So I want to tell react-admin like hey.. If you can't get the startDate via source="report_request.dateStart", then try source="report_request.dates.dateStart"

How can I do this in react-admin???

conditional-rendering react-admin frontend reactjs javascript
2 Answers

You have to create a custom field that renders either field depending on the value:

import { useRecordContext, DateField } from 'react-admin';

const ReportRequestDateField = () => {
   const record = useRecordContext();
   if (!record) return null;
   return record.report_request.dateStart
       ? <DateField source="report_request.dateStart" />
       : <DateField source="report_request.dates.dateStart" />;
};

ReportRequestDateField.defaultProps = { label: 'Start Date' };

Mode info at https://marmelab.com/react-admin/Fields.html#conditional-formatting

François Zaninotto0

Try

report_request.dateStart || report_request.dates.dateStart
userlLWa10
Related