Accepted answer

you need to assert that, which is always just string, is in fact a valid key of inputs.field.

const eventname = as keyof paymentform['field'];

however your update syntax is not right. you are setting top-level properties of inputs and you are using the value of inputs.field[eventname] as the property name.

you could do a nested update:

setinputs(inputs => ({ 
  field: { 
    [eventname]: eventvalue 

but why do we need to have this field property at all? it's the only property in inputs so why don't we just make it be the entire state.

interface fields {
  paymentmethod: string;
  amount: string;
  receiptcode: string;
  paymentdate: string;
  paymentsourceid: string;

const paymentform = () => {
  const [fields, setfields] = usestate<fields>({
    paymentmethod: "",
    amount: "",
    receiptcode: "",
    paymentdate: "",
    paymentsourceid: "paymentsourceid"

  const changedhandler = (
    e: react.changeevent<htmlinputelement | htmlselectelement>
  ) => {
    setfields((fields) => ({
      [ as keyof fields]:

  return <></>;


your eventname can be a union of the field keys. try this.

type eventname = 'paymentmethod' | 'amount' | 'recieptcode' ...etc;
const eventname = as eventname; // or

const eventname = as keyof paymentform['field'];

Related Query

More Query from same tag