Chip input in react-admin - react-admin

Question

How to use material-ui-chip-input in react-admin ?
I tried to write such code, but as a result nothing is sent to the server.
import React from 'react';
import { Field } from 'redux-form';
import ChipInput from 'material-ui-chip-input';
const renderChipInput = ({ input, meta: { touched, error } }) => (
<ChipInput {...input}/>
);
const Chip = () => <Field name="tags" component={renderChipInput} />
export default Chip;

Answer 1

It work code
import React from 'react';
import { Field } from 'redux-form';
import ChipInput from 'material-ui-chip-input';
const renderChipInput = ({ input, meta: { touched, error } }) => (
<ChipInput {...input}
value = { input.value || []}
onAdd={(addedChip) => {
let values = input.value || [];
values = values.slice();
values.push(addedChip);
input.onChange(values);
}}
onDelete={(deletedChip) => {
let values = input.value || [];
values = values.filter(v => v !== deletedChip);
input.onChange(values);
}}
onBlur={() => input.onBlur()}
/>
);
const Chip = () => <Field name="tags" component={renderChipInput} />
export default Chip;

Answer 2

Here is an example implementation with useField and react-admin#^3.0.0:
import React from 'react';
import { useInput } from 'react-admin';
import RawChipInput from 'material-ui-chip-input';
export function ChipInput(props) {
const {
input: { value, onChange, ...rest },
meta: { touched, error },
isRequired,
} = useInput(props);
if (value && !Array.isArray(value)) {
throw new Error(
`ChipInput requires an array value but received: ${JSON.stringify(
value,
)}`,
);
}
return (
<RawChipInput
value={value || []}
label={props.label}
onAdd={(newChip) => onChange((value || []).concat(newChip))}
onDelete={(deletedChip) =>
onChange((value || []).filter((item) => item !== deletedChip))
}
error={!!(touched && error)}
helperText={touched && error}
required={isRequired}
{...rest}
/>
);
}
More info about custom inputs in official docs: https://marmelab.com/react-admin/Inputs.html#the-useinput-hook