import { Modal } from "react-bootstrap"; import { ButtonStyled } from "../.."; const ModalCom = (props) => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <ButtonStyled onClick={handleShow}>{props.buttonName}</ButtonStyled> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>{props.title}</Modal.Title> </Modal.Header> <Modal.Body> <img src={props.image} alt='wallet' /> <p>{props.p}</p> </Modal.Body> </Modal> </> ); } export default ModalCom;

 import { ButtonStyled, ModalCom } from '../../Components'; const Donate = () =>{ return ( <div> <ModalCom buttonName='Ethereum' title='Ethereum Wallet' image={ImageAddress} p='23189189234923jn25890bdfs89fjnk245890' /> </div> ) } export default Donate;

 import styled from 'styled-components' const ButtonStyled = styled.button` background-color = ${({ bg }) => bg}; color : ${({color}) => color}; border-radius: 50px; padding: 10px 50px; border: none; box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 20px; margin-top: 30px; &:hover{ color: white; background-color: #62D3FC; } `; export default ButtonStyled;

¿Por qué mis accesorios no funcionan? para la posición del archivo Modal está en el componente modal y Donar está en Páginas Donar Quiero enviar el nombre del botón, título, imagen, párrafo enviado a través de accesorios pero en el navegador no aparece lo que quiero o incluso el los datos no se envían o no se muestran en el navegador Esto lo quiero mostrar , pero quiero varios modos.

y obtengo un nuevo problema cuando duplico Modalcom y luego en el navegador no dupliqué