I'm relativelt new to react. I have a project, and it has several components, and among these components is this CustomeMultiSelect component.

I call these events in another component, but when I write the code, I have this one error while building the project.

ERROR:

[BUILD] Failed to compile.
[BUILD]
[BUILD] ./components/Base-Components/CustomMultiSelect.tsx:46:9
[BUILD] Type error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' is not assignable to type '(event: SelectChangeEvent<unknown>, child: ReactNode) => void'.
[BUILD]   Types of parameters 'e' and 'event' are incompatible.
[BUILD]     Type 'SelectChangeEvent<unknown>' is not assignable to type 'ChangeEvent<{ value: unknown; }>'.
[BUILD]       Type 'Event & { target: { value: unknown; name: string; }; }' is missing the following properties from type 'ChangeEvent<{ value: unknown; }>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
[BUILD]
[BUILD]   44 |         value={props.value || []}
[BUILD]   45 |         label={props.label}
[BUILD] > 46 |         onChange={set}
[BUILD]      |         ^
[BUILD]   47 |         renderValue={render}
[BUILD]   48 |         input={<OutlinedInput notched label={props.label} />}
[BUILD]   49 |       >
[BUILD] next build --debug exited with code 1
--> Sending SIGTERM to other processes..
[PROXY] node ./proxyServer.js exited with code 1

CODE:

import {
  Checkbox,
  FormControl,
  InputLabel,
  ListItemText,
  MenuItem,
  OutlinedInput,
  Select,
  SelectProps,
} from "@mui/material";

export default function CustomMultiSelect(props: {
  value: string[] | undefined;
  setValue: (release: string[] | undefined) => void;
  placeholder: string;
  options: string[];
  label: string;
  transform?: (values: string) => string;
  selectProps?: SelectProps;
  className?: string;
}) {
  const set = (e: React.ChangeEvent<{ value: string[] | unknown }>) => {
    const value = e.target.value as string[];
    props.setValue(value.length === 0 ? undefined : value);
  };

  const render = (value: unknown) => {
    const arr = value as string[];
    if (arr.length === 0) return <em>{props.placeholder}</em>;
    return props.transform ? props.transform(`${arr.length} Selected`) : `${arr.length} Selected`;
  };

  return (
    <FormControl className={props.className} variant="outlined">
      <InputLabel shrink variant="outlined">
        {props.label}
      </InputLabel>
      <Select
        {...props.selectProps}
        multiple
        displayEmpty
        fullWidth
        variant="outlined"
        value={props.value || []}
        label={props.label}
        onChange={set}
        renderValue={render}
        input={<OutlinedInput notched label={props.label} />}
      >
        {props.options.map((val) => (
          <MenuItem key={val} value={val}>
            <Checkbox checked={(props.value || []).includes(val)} />
            <ListItemText primary={props.transform ? props.transform(val) : val} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

I'm lost, thus any help will be appreciated!!!

CodePudding user response：

According to the documentation of Mui Select, the function signature should be like:

function(event: SelectChangeEvent<T>, child?: object) => void

but your function is like

function(event: React.ChangeEvent<{ value: string[] | unknown }>) => void

Changing your code to

const set = (e: SelectChangeEvent<{ value: string[] | unknown }>)

should fix your problems.