Reverted example to use <ReferenceManyDatagridField> for posts

marmelab · Sep 3, 2016 · 3537621 · 3537621
1 parent 0212f54
commit 3537621
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/example/posts.js b/example/posts.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Filter, Edit, Create, ChipField, DateField, TextField, EditButton, Labeled, DisabledInput, TextInput, LongTextInput, DateInput, ReferenceManyField } from 'admin-on-rest/mui';
+import { List, Filter, Edit, Create, DateField, TextField, EditButton, Labeled, DisabledInput, TextInput, LongTextInput, DateInput, ReferenceManyDatagridField } from 'admin-on-rest/mui';
 
 export PostIcon from 'material-ui/svg-icons/action/book';
 
@@ -28,16 +28,18 @@ const PostTitle = ({ record }) => {
 export const PostEdit = (props) => (
     <Edit title={PostTitle} {...props}>
         <DisabledInput label="Id" source="id" />
-        <Labeled label="Comments">
-            <ReferenceManyField reference="comments" target="post_id">
-                <ChipField source="created_at" />
-            </ReferenceManyField>
-        </Labeled>
         <TextInput label="Title" source="title" />
         <TextInput label="Teaser" source="teaser" options={{ multiLine: true }} />
         <LongTextInput label="Body" source="body" />
         <DateInput label="Publication date" source="published_at" />
         <TextInput label="Average note" source="average_note" />
+        <Labeled label="Comments">
+            <ReferenceManyDatagridField reference="comments" target="post_id">
+                <TextField source="body" />
+                <DateField source="created_at" />
+                <EditButton />
+            </ReferenceManyDatagridField>
+        </Labeled>
         <DisabledInput label="Nb views" source="views" />
     </Edit>
 );

diff --git a/src/mui/field/ReferenceManyField.js b/src/mui/field/ReferenceManyField.js
@@ -35,7 +35,7 @@ export class ReferenceManyField extends Component {
             <LinearProgress style={{ marginTop: '1em' }} /> :
             <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                 {Object.keys(referenceRecords).map(index => {
-                    const props = { ...children.props, record: referenceRecords[index], resource, basePath: referenceBasePath };
+                    const props = { ...children.props, key: index, record: referenceRecords[index], resource, basePath: referenceBasePath };
                     return <children.type {...props} />;
                 })}
             </div>;