Así que tengo 4 componentes que hacen lo mismo dentro de un controlador onClick.
Tengo que definir este código en cada uno de ellos.
La razón por la que no sé cómo hacer que esto sea reutilizable es que no puede llamar a setUserContext dentro de una función de utilidad normal que no reacciona. Intenté crear un gancho pero no puedes usar Hooks como devoluciones de llamada dentro de onClick.
¿Cuáles son mis opciones aquí?
const { userContext, setUserContext } = useContext(UserContext); // this goes inside onClick and is defined in like 4 components (too much repetition) const favoriteItem = (e) => { e.stopPropagation(); e.preventDefault(); setUserContext({ ...userContext, favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) }); }Puede crear un gancho personalizado.
const useCustomHook = () => { const { userContext, setUserContext } = useContext(UserContext); const favoriteItem = (event, game) => { e.stopPropagation(); e.preventDefault(); setUserContext({ ...userContext, favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) }); } return { favoriteItem } } export default useCustomHook;Su componente puede hacer esto.
... const { favoriteItem } = useCustomHook() return ( <Element onClick={(event) => favoriteItem(event, game)} /> ) ...