add Multiple records at one in Create view

Question

I'm trying to create multiple posts at once in a react-admin Create view. It's similar to one-to-many whereby one author can create multiple posts at once in a Create component in react-admin. I haven't found a working way when using a TabbedForm. The reason being when you fill a single field, it autocompletes on the other TabbedForm since the TextInput relate to the same source name. I would like to know how to handle multiple form inputs using React-Admin Tabs without having to render the inputs twice.

Here is the source code

import * as React from "react";
import { 
  List,
  Create,
  ArrayInput,
  SimpleFormIterator,
  TextInput,
  DateInput, 
  Datagrid, 
  TextField,
  DateField, 
  Admin, 
  Resource,
  TabbedForm,
  FormTab
  } 
from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

//read ops
export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="body" />
            <DateField source="published_at" />
        </Datagrid>
    </List>
);

//create ops
export const PostCreate = (props) => (
  <Create {...props}>
  <TabbedForm>
      <FormTab label="single Post">         
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
      </FormTab>
      <FormTab label="Multiple Post">
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
          <ArrayInput source="posts">
              <SimpleFormIterator>
                <TextInput variant="outlined" label="title" source="title" />
                <TextInput variant="outlined" label="body" source="teaser" />
                <DateInput variant="outlined" label="Publication date" source="published_at" />
              </SimpleFormIterator>
          </ArrayInput>
      </FormTab>

  </TabbedForm>
</Create>
);



//main
const App = () => (
    <Admin title="ubeezy blog" dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource name="posts" list={PostList} create={PostCreate} />
    </Admin>
);

export default App;

PostCreate component is relevant here since I have Single and Multiple post creations of which when creating a single post, it picks up the input details and reflects on Multiple post creation tab fields.

Interactive demo at codesandbox:

https://codesandbox.io/s/ra-multiple-form-creation-1ecmi?file=/src/App.js

I'd appreciate the help.

Insured

Answer 1

It is necessary to use different resource names for the inputs in each tab. It won't autocomplete when it's like this.

For example, you can edit the PostCreate component as follows. I have confirmed that it works correctly on Sandbox as well.

export const PostCreate = (props) => (
  <Create {...props}>
    <TabbedForm>
      <FormTab label="Single Post">
        <TextInput variant="outlined" source="title" />
        <TextInput
          variant="outlined"
          source="body"
          options={{ multiLine: true }}
        />
        <DateInput
          variant="outlined"
          label="Publication date"
          source="published_at"
          defaultValue={new Date()}
        />
      </FormTab>
      <FormTab label="Multiple Posts">
        <TextInput variant="outlined" source="post_title" />
        <TextInput
          variant="outlined"
          source="post_body"
          options={{ multiLine: true }}
        />
        <DateInput
          variant="outlined"
          label="Publication date"
          source="post_published_at"
          defaultValue={new Date()}
        />
        <ArrayInput source="posts">
          <SimpleFormIterator>
            <TextInput variant="outlined" label="Title" source="post_title" />
            <TextInput
              variant="outlined"
              label="Body"
              source="post_body"
              options={{ multiLine: true }}
            />
            <DateInput
              variant="outlined"
              label="Publication date"
              source="post_published_at"
              defaultValue={new Date()}
            />
          </SimpleFormIterator>
        </ArrayInput>
      </FormTab>
    </TabbedForm>
  </Create>
);

Addiction