Admin-on-rest, Edit Page - Incorrect Element Error

Question

I'm using admin-on-rest in my frontend side. But when I click Edit button in the list page, it orients to Edit page successfully but there is always an error like "INCORRECT ELEMENT". Do you know why?

Thank you

enter image description here

enter image description here

App.js

import { DataTypeList } from './Components/DataType/DataTypeList';
import { FeatureList } from './Components/FeatureList';
import { DataPointTypeList } from './Components/DataPointTypeList';
import DashBoard from './Components/DashBoard';
import { DataTypeCreate } from './Components/DataType/DataTypeCreate';
import { DataTypeEdit } from './Components/DataType/DataTypeEdit';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }

    // add your own headers here
    options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}
const restClient = jsonServerRestClient('http://localhost:3001/designer', httpClient);

const App = () => (
    // <Admin title="GAMMA" dashboard={DashBoard} restClient={jsonServerRestClient('https://arcane-citadel-28609.herokuapp.com/designer')}>
    <Admin title="GAMMA" dashboard={DashBoard} restClient={restClient}>
        <Resource name="datatypes" list={DataTypeList} create={DataTypeCreate} edit={DataTypeEdit} />
        <Resource name="features" list={FeatureList} />
        <Resource name="datapointtypes" list={DataPointTypeList} />
    </Admin>
);

export default App;

DataTypeEdit.js

import React from 'react';
import { Create, Edit, SimpleForm, TextInput } from 'admin-on-rest';
import { DataTypeActions } from '../Actions/DataTypeActions';
import { DataTypeEditActions } from '../Actions/DataTypeEditActions';

export const DataTypeEdit = (props) => (
    <Edit title="Data Type - EDIT" actions={<DataTypeEditActions /> {...props}>
        <SimpleForm>
            <TextInput source="id" label="Name"/>
        </SimpleForm>
    </Edit>
);

DataTypeEditActions.js

import React from 'react';
import { CardActions } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import { DeleteButton, ListButton, RefreshButton, ShowButton, Edit } from 'admin-on-rest';

const cardActionStyle = {
    zIndex: 2,
    display: 'inline-block',
    float: 'right',
};

export const DataTypeEditActions = ({ basePath, data }) => (
    <CardActions style={cardActionStyle}>
        <ListButton basePath={basePath} />
        <DeleteButton basePath={basePath} record={data} />
        <RefreshButton />
    </CardActions>
)

Answer 1

The problem is your json data, try to return { "id": "1", "name": "test", "type": "test" }, not a array.