How to execute appropriate useState dynamically from string names in react hooks?

Question

Imagine a scenario that there's a same operation through different values (For instance generating a custom html element for different input values); in the case of using a component class, I would mocked this as follow:

const onFuncClicked = property => newVal => {
 this.setState({ [property]: newVal })
}

but what if i use react hooks:

  const onFuncClicked = property => newVal => {
    eval(`set${property}(${newVal})`);
  }

not only using eval is not recommended for thousands of reasons, but this code does not work at all!! It generates the correct useState function but the component does not know it even and gives a ReferenceError that that function (generated useState) is not defined

With useState you're free to use an object as the data and when calling the setter you would just update the object as opposed to trying to dynamically figure out which setter to use. See this question here: stackoverflow.com/questions/55342406/… — Khauri
– Khauri, Commented Aug 10, 2019 at 12:29

Clarity · Accepted Answer · 2019-08-10 12:40:51Z

4

One way to approach this is to use a map of methods to the property names:

const [property, setProperty] = useState(defaultValue);

const methodMap = { propetryName: setPropertyName, /* ... more fields */ };

Then you can call it from your set method like so:

const onClicked = (property, value) => {
    methodMap[property](value);
}

Another option, and probably more common one, would be to have state as an object with all your properties and change them by prop name:

const [state, setState] = useState({property: value});

const onClicked = (property, value) => {
    setState(state => {...state, [property]: value});
}

answered Aug 10, 2019 at 12:40

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

2 Comments

Elmira Khodaee Over a year ago

The fist solution works but painful to write if you have dozens of possible useStates. but the second one does now work i because if want to distinguish the appropriate useState from the property

Clarity Over a year ago

The second option is similar to using setState in class based components.

Pooria Khodaveissi · Accepted Answer · 2019-08-11 05:40:57Z

2

well, if you are already using hooks and useState and did end up with a bunch of them that make your code look too complex I suggest using useReducer, here is a sample from official documentation:


function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}```

answered Aug 11, 2019 at 5:40

Pooria Khodaveissi

3951 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to execute appropriate useState dynamically from string names in react hooks?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related