How would you convert a regular ol' event handler to use ts-belts magical 🌈 functional approach?

[martisj]

example event handler in React:

const onChange = (event: ChangeEvent<HTMLInputElement>, index: number) => {
  setTupleState((prev) => {
    return [...prev.slice(0, index), event.target.value, ...prev.slice(index + 1)];
  });
};

With eslint-plugin-functional/lite rules I get the following errors:

• Parameter should be a read only type
• Function must return a value

[mobily]

@martisj here is my developer-friendly eslint config (at least to me) :)

'functional/functional-parameters': 0,
'functional/no-return-void': 0,
'functional/no-conditional-statement': [2, { allowReturningBranches: true }],
'functional/no-expression-statement': 0,
'functional/no-mixed-type': 0,
'functional/immutable-data': [2, { ignoreAccessorPattern: ['**.current'] }],
'functional/prefer-readonly-type': 2,

(simply adjust your eslint config to your needs, you don't have to use all "recommended" rules)