[Solved] In react-admin, how can I prefix a UrlField href?

by


Based on @françois-zaninotto ‘s answer, I fixed a syntax error fixed some of the missing useRecordContext() param that made it work:

// ###############################################
// FbUrlField.js
import * as React from 'react';
import { Link } from '@material-ui/core';
import { useRecordContext } from 'react-admin';

const FbUrlField = ( props ) =>
{
    const { source, target, rel } = props;
    const record = useRecordContext(props);
    const value = record && record[source];

    if (value == null) {
        return null;
    }

    return (
        <Link href={`https://facebook.com/${value}`} target={target} rel={rel}>
            {value}
        </Link>
    );
};

FbUrlField.defaultProps = {
    addLabel: true,
};

export default FbUrlField;


// ###############################################
// SomeList.js
import FbUrlField from './FbUrlField';
[...]
<FbUrlField
    label="FB"
    source="fbUsername"
    target="_blank" // New window
    rel="noopener noreferrer" // For security
/>

2

solved In react-admin, how can I prefix a UrlField href?