0

I'm new to React and react-admin, so maybe I'm doing something wrong. My api returns records from MySQL and null fields are returned as "null". In the record list showing up on the client, the field is also showing "null". Can I translate this to blank on the front end or should the api return an empty string instead of null?

Here's the json results from the api:

{
      "id": 79874,
      "itemNumber": "PUM_10550101-2",
      "amazonSku": null
}

and here's the list definition:

export const ItemList = props => (
  <List {...props} filters={<ItemFilter />}>
    <Datagrid rowClick="edit">
      <TextField source="itemNumber" label="Item Number" />
      <TextField source="amazonSku" label="Amazon Sku" />
    </Datagrid>
  </List>
);

and here's what it looks like when rendered:

enter image description here

Would like to just see blanks where the nulls are, if that makes sense. Thanks

Dan G.
  • 529
  • 8
  • 21

2 Answers2

0

Not sure if this is the best way to do this, but created a new field that returned the record source in a span (not really sure why this worked): 

import React from 'react';

const TextNullableField = ({ record = {}, source }) => {
  return (
    <span>{record[source]}</span>
  );
}
export default TextNullableField;

Then, imported into the resource js file and added to the resource:

  <TextNullableField source="amazonSku" label="Amazon Sku" />

Now, the field is blank if it is passed in as null from the database:

enter image description here

Dan G.
  • 529
  • 8
  • 21
0

This has just been fixed in react-admin version 3.4.1.

The exact fix is here: https://github.com/marmelab/react-admin/pull/4661

Just upgrade the react-admin package to this latest version. This is usually a yarn upgrade react-admin.

Radu
  • 338
  • 1
  • 2
  • 6
  • Sorry, but I updated to 3.41 and changed back to TextField and it still shows null in the list column. I even added emptyText="" to the TextField element and no change. Package.json definitely shows 3.4.1 for react-admin. Any other ideas? Thanks. – Dan G. Apr 15 '20 at 18:41
  • I am running 3.4.2 and no I can confirm that that TextField displays a NULL value as an empty string. Not necessary to set emptTypes attribute of the TextField. Thanks. – Dan G. Apr 23 '20 at 03:25