Estoy haciendo mi primera app en React. Resulta que tengo este problema y no sé como solucionarlo. Mi idea es que cuando el cliente haga click en una imagen se abra un modal con la info de la imagen. El problema es que, si bien el modal se abre con el primer click, con los siguientes ya no.
Como lo puedo solucionar? Muchas gracias!
Imagen.js
import React, {Fragment, useState} from 'react';
import ModalImg from './Modal';
const Imagen = ({imagen}) => {
const {webformatURL, likes, tags, type, user, userImageURL} = imagen;
const [modalOpen, setModalOpen] = useState(false);
function handleImageOpen(){
setModalOpen(true);
}
return (
<Fragment>
<div className="col-lg-3 col-md-4 col-12 mb-4">
<a className="d-block h-100" onClick={() => handleImageOpen()}>
{(modalOpen === true ? <ModalImg imagen={imagen} /> : null)}
<img src={webformatURL} className="img-fluid img-thumbnail"></img>
</a>
</div>
</Fragment>
);
}
Modal.js
import React, { Fragment, useState } from "react";
import { Modal, Button } from "react-bootstrap";
const ModalImg = ({ imagen }) => {
const [show, setShow] = useState(true);
const handleClose = () => setShow(false);
return (
<Fragment>
<Modal show={show} onHide={handleClose} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!
<p>{imagen.likes}</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</Fragment>
);
};
export default ModalImg;