Skip to content

Commit

Permalink
[Doc] Fix Tutorial misses URL scheme in custom Field
Browse files Browse the repository at this point in the history
Closes #9592
  • Loading branch information
fzaninotto committed Jan 23, 2024
1 parent 71aaf60 commit 7b549ff
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 3 deletions.
4 changes: 2 additions & 2 deletions docs/Tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ For instance, the `website` field looks like a URL. Instead of displaying it as

This reflects the early stages of development with react-admin: let the guesser component bootstrap a basic page, then tweak the generated code to better match your business logic.

## Writing A Custom Field
## Writing A Custom Field

In react-admin, fields are just React components. When rendered, they grab the `record` fetched from the API (e.g. `{ "id": 2, "name": "Ervin Howell", "website": "anastasia.net", ... }`) using a custom hook, and use the `source` field (e.g. `website`) to get the value they should display (e.g. "anastasia.net").

Expand All @@ -380,7 +380,7 @@ import { useRecordContext } from "react-admin";
const MyUrlField = ({ source }: { source: string }) => {
const record = useRecordContext();
if (!record) return null;
return <a href={record[source]}>{record[source]}</a>;
return <a href={`http://${record[source]}`}>{record[source]}</a>;
};

export default MyUrlField;
Expand Down
5 changes: 4 additions & 1 deletion examples/tutorial/src/MyUrlField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import LaunchIcon from '@mui/icons-material/Launch';
const MyUrlField = ({ source }: { source: string }) => {
const record = useRecordContext();
return record ? (
<Link href={record[source]} sx={{ textDecoration: 'none' }}>
<Link
href={`http://${record[source]}`}
onClick={e => e.stopPropagation()}
>
{record[source]}
<LaunchIcon sx={{ fontSize: 15, ml: 1 }} />
</Link>
Expand Down

0 comments on commit 7b549ff

Please sign in to comment.