CheckboxGroupInput not rendering after save in react-admin

Question

I'm new to react and react-admin and I have a problem with CheckboxGroupInput or with any input of array type.

I have a form, this is the code:

export const MoviesCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name" validate={[required()]} />
            <TextInput source="actors" validate={[required()]} />
            <TextInput source="year" validate={[required()]} />
            <CheckboxGroupInput source="gender" validate={[required()]} choices={[
                { id: 'Action', name: 'Action' },
                { id: 'Adventure', name: 'Adventure' },
                { id: 'Animation', name: 'Animation' },
                { id: 'Biography', name: 'Biography' },
            ]} />
        </SimpleForm>
    </Create>
);

So when I want to create a new item, after I hit the save button I got this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think the problem is that the response from REST API is not correctly returned but I don't know what is the correct format for that. These are the responses that I tried to returned from REST API but nothing works:

1.

{id: 42, name: "test", year: "1234", actors: "asd", gender: "Adventure,Animation"}

2.

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: ["Animation", "Adventure"]}

3.

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}

4.

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: {id: "Animation", name: "Animation"}}

I have the same problem with ArrayInput or AutocompleteArrayInput...

Can anyone help me with this problem and tell me what am I doing wrong?

Answer 1

If you want to let the user choose multiple values among a list of possible values by showing them all,<CheckboxGroupInput> is the right component. Set the choices attribute to determine the options (with id, name tuples):

Description

<CheckboxGroupInput source="category" choices={[
    { id: 'programming', name: 'Programming' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'photography', name: 'Photography' },
]} />

So,the response from REST API should be like:option 3

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}