From b6de90007f37d1c57aee99f3c5f429f6ebb54c2b Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 14 Sep 2020 01:21:10 -0300
Subject: [PATCH 1/2] Improved form examples.

---
 docs/Inputs.md | 54 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 86c14a8e06a..64357cfd366 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1616,10 +1616,11 @@ import { useInput, required } from 'react-admin';
 
 const BoundedTextField = props => {
     const {
-        input: { name, onChange },
+        input: { name, onChange, ...rest },
         meta: { touched, error },
         isRequired
     } = useInput(props);
+
     return (
         <TextField
             name={name}
@@ -1628,38 +1629,46 @@ const BoundedTextField = props => {
             error={!!(touched && error)}
             helperText={touched && error}
             required={isRequired}
+            {...rest}
         />
     );
 };
-const LatLngInput = () => (
-    <span>
-        <BoundedTextField source="lat" label="latitude" validate={[required()]} />
-        &nbsp;
-        <BoundedTextField source="lng" label="longitude" validate={[required()]} />
-    </span>
-);
+const LatLngInput = props => {
+    const {source, ...rest} = props;
+
+    return (
+        <span>
+            <BoundedTextField source="lat" label="Latitude" validate={required()} {...rest} />
+            &nbsp;
+            <BoundedTextField source="lng" label="Longitude" validate={required()} {...rest} />
+        </span>
+    );
+};
 ```
 
-Here is another example, this time using a material-ui `SelectField` component:
+Here is another example, this time using a material-ui `Select` component:
 
 ```jsx
 // in SexInput.js
-import SelectField from '@material-ui/core/SelectField';
+import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import { useInput } from 'react-admin';
 
 const SexInput = props => {
-    const { input, meta: { touched, error } } = useInput(props);
-    return (
-        <SelectField
-            floatingLabelText="Sex"
-            errorText={touched && error}
+    const {
+        input,
+        meta: { touched, error }
+    } = useInput(props);
+
+    return <>
+        <Select
+            label="Sex"
             {...input}
         >
-            <MenuItem value="M" primaryText="Male" />
-            <MenuItem value="F" primaryText="Female" />
-        </SelectField>
-    );
+            <MenuItem value="M">Male</MenuItem>
+            <MenuItem value="F">Female</MenuItem>
+        </Select>
+    </>;    
 };
 export default SexInput;
 ```
@@ -1667,13 +1676,14 @@ export default SexInput;
 **Tip**: `useInput` accepts all arguments that you can pass to `useField`. That means that components using `useInput` accept props like [`format`](https://final-form.org/docs/react-final-form/types/FieldProps#format) and [`parse`](https://final-form.org/docs/react-final-form/types/FieldProps#parse), to convert values from the form to the input, and vice-versa:
 
 ```jsx
-const parse = value => // ...
-const format = value => // ...
+const parse = value => {/* ... */};
+const format = value => {/* ... */};
 
 const PersonEdit = props => (
     <Edit {...props}>
         <SimpleForm>
-            <SexInput source="sex"
+            <SexInput
+                source="sex"
                 format={formValue => formValue === 0 ? 'M' : 'F'}
                 parse={inputValue => inputValue === 'M' ? 0 : 1}
             />

From 91835890e64749d6b6bfb71af994d9ee4f5928a0 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 14 Sep 2020 01:23:43 -0300
Subject: [PATCH 2/2] Fix return statement.

---
 docs/Inputs.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 64357cfd366..0e653d33f50 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1660,7 +1660,7 @@ const SexInput = props => {
         meta: { touched, error }
     } = useInput(props);
 
-    return <>
+    return (
         <Select
             label="Sex"
             {...input}
@@ -1668,7 +1668,7 @@ const SexInput = props => {
             <MenuItem value="M">Male</MenuItem>
             <MenuItem value="F">Female</MenuItem>
         </Select>
-    </>;    
+    );
 };
 export default SexInput;
 ```