From 7b549ff441cb28f6fb1ef02536617a1be491fd8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= Date: Tue, 23 Jan 2024 16:46:01 +0100 Subject: [PATCH] [Doc] Fix Tutorial misses URL scheme in custom Field Closes #9592 --- docs/Tutorial.md | 4 ++-- examples/tutorial/src/MyUrlField.tsx | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 391da233af6..5009143c804 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -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"). @@ -380,7 +380,7 @@ import { useRecordContext } from "react-admin"; const MyUrlField = ({ source }: { source: string }) => { const record = useRecordContext(); if (!record) return null; - return {record[source]}; + return {record[source]}; }; export default MyUrlField; diff --git a/examples/tutorial/src/MyUrlField.tsx b/examples/tutorial/src/MyUrlField.tsx index dc4d6bf02e2..81bcba1847b 100644 --- a/examples/tutorial/src/MyUrlField.tsx +++ b/examples/tutorial/src/MyUrlField.tsx @@ -5,7 +5,10 @@ import LaunchIcon from '@mui/icons-material/Launch'; const MyUrlField = ({ source }: { source: string }) => { const record = useRecordContext(); return record ? ( - + e.stopPropagation()} + > {record[source]}