Modify what Text Field is displaying

Question

I have my <ReferenceField> where I get some data to work with. In this case, I get attribute odata.type from my API. I want my <TextField> to display this attribute but I want to slightly modify the output that is displayed. Right now the attribute is displayed like this: HardwareDatabase.CPU. Basically I need to modify this output to be liek this: CPU.

Here is my code I described earlier:

  <ReferenceField label="Type" source="id" reference="Hardware">
    <TextField source="odata.type"/>
  </ReferenceField>

Any ideas how can I modify the output of the field?

Thank you in advance.

Is the value of your `odata.type` always in that format? like this `.`? and you always want to get the `valuestring`? — JkAlombro, Apr 04 '19 at 10:21

score 2 · Accepted Answer · answered Apr 08 '19 at 11:18

2

Try this:

<ReferenceField label="Type" source="id" reference="Hardware">
   <FunctionField label="Name" render={record => record ? record["odata.type"].split(".")[1] : null} />
 </ReferenceField>

answered Apr 08 '19 at 11:18

Jason Derrick

114
9

Gildas Garcia · Answer 2 · 2019-04-04T13:58:01.057

0

Use the FunctionField:

<ReferenceField label="Type" source="id" reference="Hardware">
    <FunctionField label="Name" render={record => record ? record.odata.type.split(".")[1] : null} />
</ReferenceField>

Documentation: https://marmelab.com/react-admin/Fields.html#functionfield

NOTE: Be aware that the record may be undefined if the fetch call made by react-admin hasn't been resolved yet. This happens because react-admin renders the UI immediatly with the data it may have in its redux store already (optimistic rendering). You'll have to check that record isn't undefined before accessing it

edited Apr 04 '19 at 13:58

answered Apr 04 '19 at 11:28

Gildas Garcia

6,966
3
15
29

This solution throws this error: Cannot read property 'type' of undefined I guess the problem is in the name of the attribute itself, do you have any idea how to deal with this? – Adam Šulc Apr 04 '19 at 11:34
Console.log the record and check the path is ok – Gildas Garcia Apr 04 '19 at 11:35
It seems like record is undefined for me, or at least thats what console returns to me. – Adam Šulc Apr 04 '19 at 11:43
Also, I have just tried to put there record.Name, which is returned just fine. The issu must be in the attribute itself. I guess the name is not really appropriate. I dont really know how to workaround this. – Adam Šulc Apr 04 '19 at 11:56
The record may be undefined until the fetch returns. Check if it is undefined and return null or the data you expect when it isn't – Gildas Garcia Apr 04 '19 at 12:59

Modify what Text Field is displaying

2 Answers2