ReactJS props.onchange destructuring-CodePudding

How to fix the following props destructure for ReactJS without having to turn off "react/destructuring-assignment"? Thanks.

const AutocompleteField = (props) => {
  const { ...rest } = props
  const { control, handleSubmit, errors, setError } = useFormContext()

  return (
    <Root>
      <Autocomplete
        multiple
        limitTags={1}
        options={CATEGORIES}
        getOptionLabel={(option) => (typeof option === 'string' ? option : option.title)}
        onChange={(event, value) => props.onChange(value)}
<snip>

CodePudding user response：

If it is raising at the props.onChange(value). If so, you could try something like:

const AutocompleteField = ({onChange, ...rest}) => {
  const { control, handleSubmit, errors, setError } = useFormContext()

  return (
    <Root>
      <Autocomplete
        multiple
        limitTags={1}
        options={CATEGORIES}
        getOptionLabel={(option) => (typeof option === 'string' ? option : option.title)}
        onChange={(event, value) => onChange(value)}
        {...rest}
<snip>

CodePudding user response：

If it is raising at the props.onChange(value). If so, you could try something like:

const { ...rest,onChange } = props;