Passing an additional parameter with an onChange event with custom component

Question

On my component I use a custom component for displaying numbers- I need onChange to get the input value, I have tried the below but I get a type error:

Type '(event: any) => void' is not assignable to type '() => void'.ts(2322)

export default function Test({param}) {

  const onChange = key => event => {
    const value = parseInt(event.target.value.replace(/[^0-9]/g, ''))
    const x = {...param.x}
    x.y[key] = value

    setX(param => ({
      ...param,
      payment: x
    }))
  }

  return (
    <>
      <NumberListItem
        label="test"
        value={(param.payment)}
        onChange={onChange('payment')}
        inputProps={{decimalScale: 0, suffix: ' %'}}
      />
    </>
  )
}

NumberListItem component:

export default function NumberListItem({
  value = '',
  onChange = () => {},
  ...rest
}) {
  return (
    <ListItem>
      <NumberField
        value={value}
        onChange={onChange}
        {...rest}
      />
    </ListItem>
  )
}

NumberField component:

export default function NumberField(props: TextFieldProps & NumberFormatProps) {
  return (
    <TextField
      {...props}
      InputProps={{
        inputComponent: NumberFormatCustom
      }}
    />
  )
}

@BeHappy But then I'm getting a 'e' is defined but never used error — user3378165
– user3378165, Commented Jun 16, 2020 at 8:03
@BeHappy I changed the onChange = () => {} on NumberListItem to onChange = (e: any) => {} — user3378165
– user3378165, Commented Jun 16, 2020 at 8:16

BeHappy · Accepted Answer · 2020-06-16 08:32:15Z

1

You should set prop type:

export interface NumberListItemProps {
  value: string;
  onChange: (e:any) => {};
  [props: string]: any;
}
export default function NumberListItem({
  value = '',
  onChange,
  ...rest
}: NumberListItemProps) {
  return (
    <ListItem>
      <NumberField
        value={value}
        onChange={onChange}
        {...rest}
      />
    </ListItem>
  )
}

answered Jun 16, 2020 at 8:32

BeHappy

4,0265 gold badges30 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3378165 Over a year ago

I'm getting a type error: Type '(event: any) => void' is not assignable to type '(e: any) => {}'. Type 'void' is not assignable to type '{}' If I change onChange: (e: any) => {} to ` onChange: (e: any) => void` the onChange param won't be optional anymore, how can I keep it optional?

BeHappy Over a year ago

Would you share your NumberField component?

BeHappy Over a year ago

You have to onChange?: (e:any) => {} to make onChange optional.

Collectives™ on Stack Overflow

Passing an additional parameter with an onChange event with custom component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related