knox / React-admin-readme-3.jsx

// in posts.js import * as React from "react"; import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin'; import BookIcon from '@mui/icons-material/Book'; export const PostIcon = BookIcon; export const PostList = () => ( <List> <Datagrid> <TextField source="id" /> <TextField source="title" /> <DateField source="published_at" /> <TextField source="average_note" /> <TextField source="views" /> <EditButton /> </Datagrid> </List> ); const PostTitle = () => { const record = useRecordContext(); return <span>Post {record ? `"${record.title}"` : ''}</span>; }; export const PostEdit = () => ( <Edit title={<PostTitle />}> <SimpleForm> <TextInput disabled source="id" /> <TextInput source="title" /> <TextInput source="teaser" options={{ multiline: true }} /> <TextInput multiline source="body" /> <DateInput label="Publication date" source="published_at" /> <TextInput source="average_note" /> <TextInput disabled label="Nb views" source="views" /> </SimpleForm> </Edit> ); export const PostCreate = () => ( <Create title="Create a Post"> <SimpleForm> <TextInput source="title" /> <TextInput source="teaser" options={{ multiline: true }} /> <TextInput multiline source="body" /> <TextInput label="Publication date" source="published_at" /> <TextInput source="average_note" /> </SimpleForm> </Create> );