I have an object that contains objects and each of them has an array of items, I want to attach to each of them an edit button for viewing and deleting In React-admin, but something in my code fails and every time I press the buttons everything gets stuck, you can see in the pictures here: Thanks!
when I press this buttons the web get stuck:
The buttons in the code:
The Edit part:
The data:
import React from "react";
import {
List,
Datagrid,
TextField,
EmailField,
EditButton,
DeleteButton,
Filter,
TextInput,
ReferenceInput,
SelectInput,
BulkDeleteWithConfirmButton,
DeleteWithConfirmButton,
ArrayField,
ImageField,
ShowButton,
RefreshButton,
CreateButton,
ExportButton,
NumberField,
} from "react-admin";
import { Fragment } from "react";
const UserBulkActionButtons = (props) => (
<Fragment>
<BulkDeleteWithConfirmButton {...props} />
</Fragment>
);
const ShopList = (props) => {
return (
<List
{...props}
filters={<ShopFilter />}
actions={<ProductActionsButtons />}
bulkActionButtons={<UserBulkActionButtons />}
style={{ width: "80%" }}
>
<Datagrid rowClick="show">
<NumberField source="id" />
<TextField source="title" />
<ArrayField source="items">
<Datagrid rowClick="edit">
{" "}
<TextField source="id" />
<TextField source="name" />
<TextField source="description" />
<ImageField source="imageUrl" />{" "}
<NumberField label="in Stock" source="amount" />
<NumberField source="price" />
<ShowButton label="" />
<EditButton />
<DeleteWithConfirmButton />
</Datagrid>
</ArrayField>
<CreateButton />
{/* <EditButton /> */}
</Datagrid>
</List>
);
};
const ShopFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn />
{/* <ReferenceInput label="Title" source="userId" reference="users" allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput> */}
</Filter>
);
const ProductActionsButtons = (props) => (
<div>
<RefreshButton {...props} />
<CreateButton {...props} />
<ExportButton {...props} />
</div>
);
export default ShopList;import React from "react";
import {
Edit,
ImageField,
SimpleForm,
TextInput,
Datagrid,
ArrayField,
TextField,
ImageInput,
SimpleFormIterator,
ArrayInput,
Toolbar,
SaveButton,
DeleteWithConfirmButton,
NumberInput,
required,
} from "react-admin";
const ShopEdit = (props) => {
return (
<Edit {...props} title={<ShopTitle />} undoable={false}>
<SimpleForm toolbar={<ProductEditToolbar />}>
<TextInput disabled source="id" />
<TextInput label="Category" source="title" validate={[required()]} />
<ArrayInput source="items">
<SimpleFormIterator>
<TextInput
label="Product Name"
source="name"
validate={[required()]}
/>
<TextInput
label="Product Description"
source="description"
validate={[required()]}
/>
<ImageInput label="Product Image Url" source="imageUrl" />
{/* <TextInput label="Product Price" source="price" /> */}
<NumberInput min="0" step="1" label="in Stock" source="amount" />
<NumberInput
label="Product Price"
min="0.01"
step="0.01"
source="price"
validate={[required()]}
/>
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
};
const ShopTitle = ({ record }) => {
return <span>{record ? `Product "${record.name}"` : ""}</span>;
};
const ProductEditToolbar = (props) => (
<Toolbar {...props}>
<SaveButton />
<DeleteWithConfirmButton />
</Toolbar>
);
export default ShopEdit;