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

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

Answer 1

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

Answer 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>
</>
);
}```