Update react code with latest way to do

Author: webda2l

admin/getting-started.md

@@ -91,7 +91,7 @@ const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoin
       addField: true,
       addLabel: true
     };
-    
+
     return { api };
   })
 ;
@@ -126,7 +126,7 @@ const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoin
   .then( ({ api }) => {
 
     const books = api.resources.find(({ name }) => 'books' === name);
-    const description = books.fields.find(f => 'description' === f.name);
+    const description = books.fields.find(({ name }) => 'description' === name);
 
     description.input = props => (
       <RichTextInput {...props} source="description" />
@@ -194,11 +194,11 @@ __Note__: In this example, we choose to send the file via a multi-part form data
 
 ### Using a Custom Validation Function or Inject Custom Props
 
-You can use `fieldProps` and `inputProps` to respectively inject custom properties to fields and inputs generated by API
-Platform Admin. This is particularly useful to add custom validation rules:
+Example to add a minLength validator on the `description` field:
 
 ```javascript
 import React, { Component } from 'react';
+import { minLength, RichTextInput } from 'react-admin';
 import { AdminBuilder, hydraClient } from '@api-platform-admin';
 import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
 
@@ -208,12 +208,13 @@ export default class extends Component {
   state = { api: null };
 
   componentDidMount() {
-    parseHydraDocumentation(entrypoint).then( ({ api }) => {
-      const books = api.resources.find(r => 'books' === r.name);
+    parseHydraDocumentation(entrypoint).then(({ api }) => {
+      const books = api.resources.find(({ name }) => 'books' === name);
 
-      books.writableFields.find(f => 'description' === f.name).inputProps = {
-        validate: value => value.length >= 30 ? undefined : 'Minimum length: 30';
-      };
+      const description = books.fields.find(({ name }) => 'description' === name)
+      description.input = props => (
+        <RichTextInput source={description.name} label="Description" validate={minLength(30)} {...props} />
+      )
 
       this.setState({ api });
     });

admin/handling-relations-to-collections.md

@@ -87,27 +87,28 @@ import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/pars
 const entrypoint = 'https://demo.api-platform.com';
 
 export default class extends Component {
-  state = { api: null };
+  state = { api: null }
 
   componentDidMount() {
-    parseHydraDocumentation(entrypoint).then( ({api}) => {
-        const books = api.resources.find(r => 'books' === r.name);
+    parseHydraDocumentation(entrypoint).then(({api}) => {
+        const books = api.resources.find(({ name }) => 'books' === name)
+        const authors = books.fields.find(({ name }) => 'authors' === name)
 
         // Set the field in the list and the show views
-        books.readableFields.find(f => 'authors' === f.name).fieldComponent =
-          <ReferenceArrayField label="Authors" reference="people" source="authors" key="authors">
+        authors.field = props => (
+          <ReferenceArrayField source={authors.name} reference={authors.reference.name} key={authors.name} {...props}>
             <SingleFieldList>
               <ChipField source="name" key="name"/>
             </SingleFieldList>
           </ReferenceArrayField>
-        ;
+        );
 
         // Set the input in the edit and create views
-        books.writableFields.find(f => 'authors' === f.name).inputComponent =
-          <ReferenceArrayInput label="Authors" reference="people" source="authors" key="authors">
+        authors.input = props => (
+          <ReferenceArrayInput source={authors.name} reference={authors.reference.name} label="Authors" key={authors.name} {...props} allowEmpty>
             <SelectArrayInput optionText="name"/>
           </ReferenceArrayInput>
-        ;
+        );
 
         this.setState({ api });
       }
@@ -162,11 +163,11 @@ Then edit the configuration of API Platform Admin to pass a `filterToQuery` prop
     // ...
 
     // Set the input in the edit and create views
-    books.writableFields.find(f => 'authors' === f.name).inputComponent =
-      <ReferenceArrayInput label="Authors" reference="people" source="authors" key="authors" filterToQuery={searchText => ({ name: searchText })}>
-        <SelectArrayInput optionText="name"/>
-      </ReferenceArrayInput>
-    ;
+      authors.input = props => (
+        <ReferenceArrayInput source={authors.name} reference={authors.reference.name} label="Authors" key={authors.name} filterToQuery={searchText => ({ name: searchText })} {...props} allowEmpty>
+          <SelectArrayInput optionText="name"/>
+        </ReferenceArrayInput>
+      );
 
     // ...
   }