Using field types

Writing a custom Field component

Author: victorkane

src/MyUrlField.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const MyUrlField = ({ record = {}, source }) =>
+    <a href={record[source]}>
+        {record[source]}
+    </a>;
+
+export default MyUrlField;

src/users.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { List, Datagrid, TextField, EmailField, UrlField } from 'react-admin';
+import { List, Datagrid, TextField, EmailField } from 'react-admin';
+import MyUrlField from './MyUrlField';
 
 export const UserList = props => (
     <List {...props}>
@@ -8,7 +9,7 @@ export const UserList = props => (
             <TextField source="name" />
             <EmailField source="email" />
             <TextField source="phone" />
-            <UrlField source="website" />
+            <MyUrlField source="website" />
             <TextField source="company.name" />
         </Datagrid>
     </List>