React TypeScript: How to use a variable name as part of a key

Question

How can I swap the word email here for value??

  const [state, setState] = useState({
    emailError: '',
  });

const myFunction = (event: ChangeEvent<HTMLInputElement>) => {
   const value = event.target.id; // 'email'
   if (event.target.id === value && state.emailError) validate(value);
//                                         ^
//                                         |___ How can I swap the word email here for value??
}

I tried with this..

if (event.target.id === value && state[value]+Error) validate(value);

normally if a name is from a variable, do `{ [name]: value }`, when you know `{ name: value }` won't work. — windmaomao, Dec 02 '19 at 17:58

score 3 · Accepted Answer · answered Dec 02 '19 at 17:56

3

You can use JS template syntax for this:

if (event.target.id === value && state[`${value}Error`]) validate(value);

answered Dec 02 '19 at 17:56

Clarity

10,730
2
25
35

I get a typescript error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ emailError: string; }'. No index signature with a parameter of type 'string' was found on type '{ emailError: string;}'.ts(7053) – Bill Dec 02 '19 at 17:59
You probably need to create an interface for the state and add `[key: string]: string;` there: https://stackoverflow.com/questions/32968332/how-do-i-prevent-the-error-index-signature-of-object-type-implicitly-has-an-an – Clarity Dec 02 '19 at 18:09

score 0 · Answer 2 · answered Dec 02 '19 at 18:13

This is a tricky one since I don't think you can type the ID which would be present on the event. So you may have to explicitly type it for TS to figure it out and also add a type for your state. This may work

const [state, setState] = useState<{ emailError: string }>({
  emailError: '',
});

const myFunction = (event: ChangeEvent<HTMLInputElement>) => {
   const value = event.target.id;
   let stateKey;
   switch(value) {
     case 'email':
       stateKey = 'emailError';
       break;
   }
   if(stateKey) {
     if (event.target.id === value && state[stateKey]) validate(value);
   }
}

inside the switch block on `statekey` I get let `stateKey: any ':' expected.` — Bill, Dec 03 '19 at 03:21

React TypeScript: How to use a variable name as part of a key

2 Answers2