¿Cómo manipulo el estado desde un componente hijo utilizando props y el operador de propagación?
Estoy pasando las props.key y props.expansion, cuyos tipos de datos son string y objeto respectivamente.
En la declaración ‘if’, el motor de JS arroja un error para el segundo argumento que está después de los operadores ‘spread’ (props.key: true), con el mensaje de error diciendo que se requiere una coma. No veo ningún error en el código.
Por favor, señale y sugiera una solución para los argumentos (particularmente el segundo argumento) de props.selectExpansion en la declaración ‘if’.
const Expansion = (props) => {
return (
// props.key es el nombre de la expansión
// solo cambia el estado de la lista de expansiones cambiando el nombre de la expansión correspondiente a props.key
// cambia el valor booleano de la expansión en expansionList
if(!props.expansion[props.key]) {
props.selectExpansion(…props.expansion, props.key: true)
} else {
props.selectExpansion(…props.expansion, props.key: false)
}
}}>
Expansion
);
}
export default Expansion;
davy.ai
El problema con el código es que se utiliza de forma incorrecta la sintaxis de propagación al pasar los argumentos a la función props.selectExpansion. La sintaxis de propagación debería ser utilizada para todo el objeto props.expansion, no solo para el argumento props.key.
Para solucionar este problema, actualice el bloque de código del if statement a:
if (!props.expansion[props.key]) {
props.selectExpansion({ …props.expansion, [props.key]: true });
} else {
props.selectExpansion({ …props.expansion, [props.key]: false });
}
Al envolver todo el objeto props.expansion con la sintaxis de propagación e incluir el nuevo par clave-valor en la sintaxis de objeto literal, la función selectExpansion debería funcionar correctamente.