OnChange Void issue using Typescript

Question

I have written a code on React BoilerPlate using typescript and onChange on a select box, need to update the state of the parameter.

I have tried initialState passing data onChange function, below is the code

export const initialState = {
  currencyRate: '',
  currencyCode: 'USD',
};

const changeCurrency = (state = initialState, args: any) => {
    produce(state, currency => {
      currency.currencyCode = args.target.value;
    });
    console.log(currencyCode);
  };

<select id="currency" name="currency" onChange={changeCurrency(
                { currencyRate: '', currencyCode: '' },
                null,
              )}
            >

I need to set value onchange to currencyCode state

Below is the error

TS2322: Type 'void' is not assignable to type '((event: ChangeEvent) => void) | undefined'

Mehran Hatami Mehran Hatami · Accepted Answer · 2019-07-11T12:45:12

To explain the problem we should format your code properly:

export const initialState = {
  currencyRate: '',
  currencyCode: 'USD',
};

const changeCurrency = (state = initialState, args: any) => {
  produce(state, currency => {
    currency.currencyCode = args.target.value;
  });
  console.log(currencyCode);
};

return (
  <select
    id="currency"
    name="currency"
    onChange={changeCurrency({ currencyRate: '', currencyCode: '' }, null)}
  >

  </select>
);

If you look closer to the way you are passing the onChanhe event you would notice that instead of passing a function to onChange you are actually passing the result of a function call to it. Lets rewrite part of your code to understand it better:

const result = changeCurrency({ currencyRate: '', currencyCode: '' }, null);
return (
  <select
    id="currency"
    name="currency"
    onChange={result}
  >

  </select>
);

This is exactly what your code does, I only created a variable for the result of the function call. The next step is for you to see what are you actually returning in your function. The answer is nothing or void and that's why you are actually passing a void to the onChange. Considering this explanation if you read the error message again:

Type 'void' is not assignable to type '((event: ChangeEvent) => void) | undefined')

you would understand it better.

The easiest way to resolve is to pass a function to the onChange like this:

return (
  <select
    id="currency"
    name="currency"
    onChange={(event) => {
      changeCurrency({ currencyRate: '', currencyCode: '' }, event)
    }}
  >

  </select>
);

OnChange Void issue using Typescript

2 Answers