How to create a controller and submit data from one side of a mui transfer list

[emanuella92gomesr]

I implemented a reusable transfer list using Material-UI. This component accepts two arrays: left (which content will be shown at the left list) and right (which content will be shown at the right list). However, I don't know how to submit an array of id's elements of the left list (The array type should be number). I know that I have to implement a Controller and I don't know where.

[Moshyfawn]

I don't have time to create a codesandbox currently, but I have some thoughts on how to structure your controlled TransferList component using Controller or useController.

If you have to refer to the state of both the left and right columns in most of the TransferList elements, dividing the component into separate fields (multiple Controllers) is unnecessary.

The main idea is to read the field values for both lists from a nested field value, i.e. transferList.left and transferList.right, and mutate the whole transferList field value on the transfer action buttons press, updating both the left and right lists, since both lists get a new value on transfer.

Let me know if this helps 🙌

[emanuella92gomesr]

I have to get all ids from the items of the left list and convert them into a number array.
The transfer list is a reusable component and I don't know how to submit this array.

Today, the component is called like this:

<TranferList leftArray={leftList} rightArray={rightList} />

Data format - example:
{id: 0, name: "test 0"};

Zod schema:

export const listSchema = z.object({ list: z.array(z.number()) });

[Moshyfawn]

Pass the RHF field value of your list to the TransferList component to control its values.

<Controller
  control={control}
  name="items"
  render={({ field }) => (
    <TransferList
      leftList={field.value.leftList}
      rightList={field.value.rightList}
    />
  )}
/>

To obtain the values of the lists, implement an onChange that returns the updated values to store them as RHF values.

<Controller
  control={control}
  name="items"
  render={({ field }) => (
    <TransferList
      leftList={field.value.leftList}
      rightList={field.value.rightList}
+     onChange={({ leftList, rightList }) =>
+       field.onChange({
+         leftList,
+         rightList
+       })
+     }
    />
  )}
/>

I am not familiar with your TransferList component implementation, so I've taken the basic transfer list example from MUI's documentation and modified it to expose the values in a controlled input manner to be enable to hook into them with RHF. You can refer to this codesandbox example when applying it to your TransformList implementation.

[emanuella92gomesr]

This is the transfer list code. How to submit a number array that consists of id's of elements of left side. The user can update the both lists using the four buttons, based on MUI Basic Transfer List.

import { useEffect, useState } from "react";
import {
  Box,
  Button,
  Checkbox,
  Grid,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Paper,
} from "@mui/material";
import { Label } from "../Form/Label";
import { AddButton } from "../Button/Add";
import { useStyles } from "./styles";

interface TransferlistProps {
  leftArray: any[];
  rightArray: any[];
}

function not(a: any[], b: any[]) {
  return a.filter((value) => b.indexOf(value) === -1);
}

function intersection(a: any[], b: any[]) {
  return a.filter((value) => b.indexOf(value) !== -1);
}

export const TransferList = ({ leftArray, rightArray }: TransferlistProps) => {
  const [checked, setChecked] = useState<any[]>([]);
  const [left, setLeft] = useState<any[]>(
    leftArray.map((value: any) => ({
      name: value.name,
      id: value.id,
    }))
  );

  const [right, setRight] = useState<any[]>(
    rightArray.map((value: any) => ({
      name: value.name,
      id: value.id,
    }))
  );

  const leftChecked = intersection(checked, left);
  const rightChecked = intersection(checked, right);

  const handleToggle = (value: any) => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
   
  };

  const handleAllRight = () => {
    setRight(right.concat(left));
    setLeft([]);
  };

  const handleCheckedRight = () => {
    setRight(right.concat(leftChecked));
    setLeft(not(left, leftChecked));
    setChecked(not(checked, leftChecked));
  };

  const handleCheckedLeft = () => {
    setLeft(left.concat(rightChecked));
    setRight(not(right, rightChecked));
    setChecked(not(checked, rightChecked));
  };

  const handleAllLeft = () => {
    setLeft(left.concat(right));
    setRight([]);
  };

  const customList = (items: any[]) => (
    <Paper elevation={0} >
      <List dense component="div" role="list">
        {items.map((value: any) => {
          const labelId = `transfer-list-item-${value.id}-label`;

          return (
            <ListItemButton
              key={value}
              role="listitem"
              onClick={handleToggle(value)}
            >
              <ListItemIcon>
                <Checkbox
                  checked={checked.indexOf(value) !== -1}
                  tabIndex={-1}
                  disableRipple
                 
                />
              </ListItemIcon>
              <ListItemText
                id={labelId}
                primary={`${value.name}`}
               
              />
            </ListItemButton>
          );
        })}
      </List>
    </Paper>
  );
 
  return (
 
      <Grid container spacing={2} alignItems="center">
        <Grid item>
          {customList(left)}
        </Grid>
        <Grid item>
          <Grid container direction="column" alignItems="center">
            <Button
              sx={{ my: 0.5 }}
              variant="outlined"
              size="small"
              onClick={handleAllRight}
              disabled={left.length === 0}
              aria-label="move all right"
            >
              ≫
            </Button>
            <Button
              sx={{ my: 0.5 }}
              variant="outlined"
              size="small"
              onClick={handleCheckedRight}
              disabled={leftChecked.length === 0}
              aria-label="move selected right"
            >
              &gt;
            </Button>
            <Button
              sx={{ my: 0.5 }}
              variant="outlined"
              size="small"
              onClick={handleCheckedLeft}
              disabled={rightChecked.length === 0}
              aria-label="move selected left"
            >
              &lt;
            </Button>
            <Button
              sx={{ my: 0.5 }}
              variant="outlined"
              size="small"
              onClick={handleAllLeft}
              disabled={right.length === 0}
              aria-label="move all left"
            >
              ≪
            </Button>
          </Grid>
        </Grid>
        <Grid item>
          {customList(right)}
        </Grid>
      </Grid>
  );
};

[Moshyfawn]

Did you check the example codesandbox I've linked? I've used the exact MUI example to show how to make it work with RHF.

[emanuella92gomesr]

I checked and this is a good example. However, I forgot to mention that I defined a type of data that accepts an array that will store the id's.

export type AnyType = {
  list: any[];
};

When I define the form (useForm), I can not define the defaultValue field value because of type conflict and I can not register the values using
{...register(list)}
and I can not include an error message. I am using RHF + Zod.

[Moshyfawn]

Do you mind modifying the example codesandbox to match your use-case / issue for me to take a look at?

[emanuella92gomesr]

I can update the lists but I can not send the set of id's from left list to the put method.

Data structure:

{id: 1, name: "Anna"}

Part of the form code:

const leftList: any[] = listAny;

  const rightList: any[] = listAnyII.filter(
    (obj1) => !listAny.some((obj2) => obj1.id === obj2.id)
  );

{/* const defaultValues  = {
    roles: {
      leftList,
      rightList,
    },
  }*}
  

  const form = useForm<AnyType>({
   // in default values, I should pass a set of data of type AnyType
    defaultValues:  ,
    resolver: zodResolver(anySchema),
  });
  const { register, handleSubmit, formState, reset, control } = form;
  const { errors } = formState;

  const onSubmit = (formValues: AnyType) => {
    addAny(formValues);
  };

Schema:

export const anySchema = z.object({
  list: z.array(z.number().min(1, "I should choose at list one item")),
});

Data Type:

export type AnyType = {
  list: any[];
};

PUT call:

[...]
await api.put(`add/list/${id}`, {
        list: data.list,
 });
[...]

Note: the transfer list is a reusable component. So, I can not use only one type of data.

[emanuella92gomesr]

I'm so sorry if I sounded annoying.

After some hours of debug, my development team found out the solution. Zod was unnecessary e, now, we can send the data to an endpoint. So, the tip presented above can work very well!

Thank you!

[emanuella92gomesr]

The issue was resolved.

[abhishekpurecode]

To facilitate data transfer from one side of a Material-UI (MUI) Transfer List, create a controller by defining the source and destination arrays for the list items. Implement a function to handle the data submission upon user interaction, updating the respective arrays. Leverage MUI's TransferList component to streamline the process, ensuring a smooth and intuitive user experience. Employ state management to dynamically reflect changes and maintain synchronization between the source and destination lists. This approach provides a structured and effective way to manage data flow within the Transfer List component.

To know more, read here: https://purecode.ai/blogs/mui-checkbox/