How can I access a state variable using a string within functional component?

Question

I am trying to access a state variable using a string within a React functional component.

For example, I know in Class components I can do the following to access state based on input:

class Form extends React.Component {

   constructor(props) {
     super(props);
    this.state = {
      inputOne: null
    }}

   handleBlur(e, name) {
       if (!this.state[name]) {
         this.setState({
          [`${name}Missing`]: true,
        });
       } else {
       this.setState({
        [`${name}Missing`]: false,
      });
    }

    render() {
       <input onBlur={(e) => this.handleBlur(e, "inputOne")}></input>
   }
 }

By using this.state[name] within the handleBlur function, I can access the inputOne state value dynamically.

How would I do something similar within a functional component?

Thanks for your time!

This is too broad a question. Get some real code and try to do on something in codesandbox. Read up useState. — Tushar Shahi
– Tushar Shahi, Commented Oct 13, 2021 at 18:00

Ali Yaghoubi · Accepted Answer · 2021-10-13 18:04:05Z

1

You can do that:

import { useState } from 'react';

const Custom = () => {
  const [state, setState] = useState({
    inputOne: "",
  });

  const handleBlur = (e, name) => {
    if (!state[name]) {
      setState({
        [`${name}Missing`]: true,
      });
    } else {
      setState({
        [`${name}Missing`]: false,
      });
    }
  }

  return (
    <input onBlur={(e) => handleBlur(e, "inputOne")}></input>
  );
};

answered Oct 13, 2021 at 18:04

Ali Yaghoubi

1,29010 silver badges18 bronze badges

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

1 Comment

mg2019 Over a year ago

Thank you Ali! This answer most closely resembles the structure of my app. Appreciate your time!

CertainPerformance · Accepted Answer · 2021-10-13 18:03:14Z

1

The only way to do this in a functional component would be to have the same sort of state structure as in the class component - that is, for the state values you want to dynamically access, put them all into an object (or an array).

const [inputs, setInputs] = useState({
  inputOne: null
})

And then const someStr = 'inputOne' and inputs[someString] will give you that state value. To set it:

setInputs({
  ...inputs,
  [someStr]: newValue
  // or use whatever computed property name you want
});

It's usually recommended to use separate state variables when using functional components - but when you have lots of state variables that you want to dynamically access, using a single object or array can make more sense.

answered Oct 13, 2021 at 18:03

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

mg2019 Over a year ago

Thanks so much, definitely learned something new here!

Collectives™ on Stack Overflow

How can I access a state variable using a string within functional component?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related