Quiero cambiar un valor en el componente principal cambiando el estado en el componente secundario que pasan los accesorios.
// This is the parent component const [showEdit, setShowEdit] = useState(false); <EditApplicationSettings appSettings={appSettings} changeState={(showEdit) => setShowEdit(showEdit)} /> // This is the child component export default function EditApplicationSettings({ appSettings, props }) { return ( <button className="button-red" onClick={() => props.changeState(false)} > Cancel </button> ); }Cuando hago clic en el botón, eso debería cambiar el estado en parent , pero en su lugar, aparece un error .
TypeError: Cannot read properties of undefined (reading 'changeState')¿En qué me equivoqué al pasar los apoyos?
En términos de React, props tiende a referirse a todo el objeto de propiedad:
EditApplicationSettings(props) Pero dado que está desestructurando las propiedades del objeto, debe hacer referencia explícitamente a la propiedad changeState :
EditApplicationSettings({ appSettings, changeState })y
onClick={() => changeState(false)}Para solucionar este error
TypeError: Cannot read properties of undefined (reading 'changeState')entonces esta linea
export default function EditApplicationSettings({ appSettings, props }) {debiera ser
export default function EditApplicationSettings({ appSettings, ...props }) { ^^^Puede leer más en MDN doc para la asignación de desestructuración