Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

No me anda

import Imagen from '../Galeria/Imagen';
import styled from 'styled-components';
import useFotoModal from '../../Hooks/useFotoModal';

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
`;

const DialogEstilizado = styled.dialog`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 0;
  border: 0;
  width: 956px;
  display: flex;
  justify-content: center;
  z-index: 1000;

  form {
    position: absolute;
    top: 20px;
    right: 20px;

    button {
      background: none;
      border: none;
      cursor: pointer;

      img {
        position: relative;
        width: 24px;
        left: -1rem;
        bottom: 1.5rem;
        height: 24px;
        border: 1px solid #fff;
        border-radius: 50%;
        padding: 5px;
        &:hover {
          scale: 1.1;
          transition: 0.3s;
        }
      }
    }
  }
`;

const ModalZoom = () => {

  const {estaAbiertoModal, fotoSeleccionada, cerrarModal} = useFotoModal()

  return (
    <>
      {estaAbiertoModal && (
        <>
          <Overlay onClick={cerrarModal} />
          <DialogEstilizado open={!!fotoSeleccionada} onClose={()=>cerrarModal()}>
            <Imagen foto={fotoSeleccionada} expandida={true} />
            <form method="dialog">
              <BotonIcono formMethod="dialog">
                <img src="/iconos/cerrar.png" alt="Ícono de cerrar" />
              </BotonIcono>
            </form>
          </DialogEstilizado>
        </>
      )}
    </>
  );
};

export default ModalZoom;
useFotoModal.jsx:5 Uncaught ReferenceError: useContext is not defined
    at useFotoModal (useFotoModal.jsx:5:31)
    at ModalZoom (index.jsx:58:61)
useFotoModal.jsx:5 Uncaught ReferenceError: useContext is not defined
    at useFotoModal (useFotoModal.jsx:5:31)
    at ModalZoom (index.jsx:58:61)

chunk-QXLG2TGQ.js?v=70490e87:19464 Uncaught ReferenceError: useContext is not defined
    at useFotoModal (useFotoModal.jsx:5:31)
    at ModalZoom (index.jsx:58:61)
1 respuesta

¡Hola Juan!

Entiendo que estás teniendo un problema con el uso de useContext en tu custom hook useFotoModal. Parece que estás intentando utilizar useContext sin haberlo importado en tu archivo useFotoModal.jsx. Para solucionar este error, debes importar useContext desde React, de la siguiente manera:

import React, { useContext } from 'react';

Asegúrate de que esta importación esté presente en tu archivo useFotoModal.jsx para que puedas utilizar useContext sin problemas.

Espero que esta solución te ayude a resolver el inconveniente. ¡Buena suerte con tu proyecto en ReactJS!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios