Por ejemplo, si tengo un montón de ganchos useState como:
const [name, setName] = useState('') const [age, setAge] = useState(0) const [location, setLocation] = useState('')y una función que toma un valor de cadena como:
const handleClick = string => console.log(string) // Name¿Hay alguna forma de elegir dinámicamente qué estado actualizo pasando el valor de la cadena a la llamada de función? Algo del estilo de:
const handleClick = (string) => { console.log(string) // Name set${string}('John Doe') }Puede lograr este comportamiento agrupando sus estados en uno
const [state, setState] = useState({ name: '', age: 0, location: '', }); const handleClick = (key, value) => { setState((prev) => ({...prev, key: value})) }Por lo general, se usa un solo objeto para esto.
const [state, setState] = useState({ name: '', age: 0, location: '' }) const handleClick = (key, value) => setState({...state, [key]: value});También podrías hacer algo como esto:
const [name, setName] = useState('') const [age, setAge] = useState(0) const [location, setLocation] = useState('') const map = { name: setName, age: setAge, location: setLocation } const handleClick = (string) => { map[string]('John Doe') }