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>
</Modal.Body>
</Modal>
</>
);
}
export default ModalCom;
import { ButtonStyled, ModalCom } from '../../Components';
const Donate = () =>{
return (
<div>
<ModalCom
buttonName='Ethereum'
title='Ethereum Wallet'
image=""
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;
why are my props not working? for the Modal file position it is in the modal component and Donate is in Pages Donate I want to send the name of the button, title, image, paragraph sent via props but in the browser it doesn’t appear what I want or even the data is not sent or Show in Browser
This I want showing but i can multiple modal