Input Components Not Working

Question

We are integrating AOR(version 1.2.3) with existing Application. we are trying to provide Edit Feature in that when we give <---Field> Components its working fine also able to see SAVE button but when it <---Input> Components no SAVE button is visible and Component does take inputs.

Code when Field Components are used

 import React, { Component } from 'react';
import {
Components
} from 'admin-on-rest';
 
 const CustomerEdit = (props) => (
 <Edit {...this.props}>
         <TabbedForm>
           <FormTab label="Profile">
               <TextField source="firstName" />
               <TextField source="middleName" />
               <TextField source="lastName" />
           </FormTab>
           <FormTab label="Address">
           <ReferenceManyField addLabel={false} reference="CustomerAddresses" target="customerProfileId">
               <Datagrid>
               <EditButton/>
                 <TextField source="id" />
                 <TextField source="line1" />
                 <TextField source="pinCode" />
                </Datagrid>
             </ReferenceManyField>
           </FormTab>
            </TabbedForm>
     </Edit>
     );
     export default CustomerEdit;

Code when Input Components are used

import React, { Component } from 'react';
import {
Components
} from 'admin-on-rest';
 
 const CustomerEdit = (props) => (
 <Edit {...this.props}>
         <TabbedForm>
           <FormTab label="Profile">
               <TextInput source="firstName" />
               <TextInput source="middleName" />
               <TextInput source="lastName" />
           </FormTab>
           <FormTab label="Address">
           <ReferenceManyField addLabel={false} reference="CustomerAddresses" target="customerProfileId">
               <Datagrid>
               <EditButton/>
                 <TextInput source="id" />
                 <TextInput source="line1" />
                 <TextInput source="pinCode" />
                </Datagrid>
             </ReferenceManyField>
           </FormTab>
            </TabbedForm>
     </Edit>
     );
     export default CustomerEdit;

This is App.js

import React from 'react';
import PropTypes from 'prop-types';

// redux, react-router, redux-form, saga, and material-ui
// form the 'kernel' on which admin-on-rest runs
import { combineReducers, createStore, compose, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import createHistory from 'history/createHashHistory'
import { Switch, Route } from 'react-router-dom'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form';
import createSagaMiddleware from 'redux-saga';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


// prebuilt admin-on-rest features
import {
  adminReducer,
  localeReducer,
  crudSaga,
  TranslationProvider,
} from 'admin-on-rest';

import restClient from './restClient';
import GenericList from './ui/List';
import CustomerEdit from './ui/views/customer/customerEdit';

const reducer = combineReducers({
  admin: adminReducer([{ name: 'CustomerProfiles' },
  { name: 'CustomerAddresses' }]),
  locale: localeReducer(),
  form: formReducer,
  routing: routerReducer,
});
const sagaMiddleware = createSagaMiddleware();
const history = createHistory();

const store = createStore(reducer, undefined, compose(
  applyMiddleware(sagaMiddleware, routerMiddleware(history)),
  window.devToolsExtension ? window.devToolsExtension() : f => f,
));

sagaMiddleware.run(crudSaga(restClient));

const App = () => (
  <Provider store={store}>
    <TranslationProvider messages={messages}>
      <ConnectedRouter history={history}>
        <MuiThemeProvider>
          <Switch>
            <Route exact path="/profile"
              hasCreate render={
                (routeProps) => <GenericList resource="CustomerProfiles" {...routeProps} />
              } />
            <Route exact path="/profile/:id"
              hasEdit render={
                (routeProps) => <CustomerEdit resource="CustomerProfiles" {...routeProps} />
              } />
</Switch>
        </MuiThemeProvider>
      </ConnectedRouter>
    </TranslationProvider>
  </Provider>
);

export default App

This in case of Input Components No Data from Backend for CustomerAddress and also no Save Button

This in Case of Field Component

when we use <---FIELD/> Component

Answer 1

Don't you have an error in the console about ReferenceManyInput ? This component does not exist.

I checked the documentation and we indeed included it in the Resources chapter. It will be fixed soon.

For referencing many other resources, you should use the ReferenceArrayInput. However, it does not support Datagrids. There are not components allowing you to edit related resources yet.