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
– windmaomao, Commented Dec 2, 2019 at 17:58

Clarity · Accepted Answer · 2019-12-02 17:56:35Z

3

You can use JS template syntax for this:

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

answered Dec 2, 2019 at 17:56

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

2 Comments

Bill Over a year ago

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)

Clarity Over a year ago

You probably need to create an interface for the state and add [key: string]: string; there: stackoverflow.com/questions/32968332/…

pizzarob · Accepted Answer · 2019-12-02 18:13:29Z

0

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);
   }
}

answered Dec 2, 2019 at 18:13

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

1 Comment

Bill Over a year ago

inside the switch block on statekey I get let stateKey: any ':' expected.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related