title: Reactjs Props not working and not showing in browser
body: <pre><code>import { Modal } from &quot;react-bootstrap&quot;;
  import { ButtonStyled } from &quot;../..&quot;;
  
  const ModalCom = (props) =&gt; {
   const [show, setShow] = useState(false);
  
  const handleClose = () =&gt; setShow(false);
  const handleShow = () =&gt; setShow(true);
  
  return (
    &lt;&gt;
    &lt;ButtonStyled onClick={handleShow}&gt;{props.buttonName}&lt;/ButtonStyled&gt;
      &lt;Modal show={show} onHide={handleClose}&gt;
        &lt;Modal.Header closeButton&gt;
          &lt;Modal.Title&gt;{props.title}&lt;/Modal.Title&gt;
        &lt;/Modal.Header&gt;
        &lt;Modal.Body&gt;
          &lt;img src={props.image} alt='wallet' /&gt;
          &lt;p&gt;{props.p}&lt;/p&gt;
        &lt;/Modal.Body&gt;
      &lt;/Modal&gt;
    &lt;/&gt;
  );
  }
  
  export default ModalCom;
  </code></pre>
  <pre><code> import { ButtonStyled, ModalCom } from '../../Components';
  
  const Donate = () =&gt;{
      return (
          &lt;div&gt;
              &lt;ModalCom 
                  buttonName='Ethereum'
                  title='Ethereum Wallet'
                  image={ImageAddress}
                  p='23189189234923jn25890bdfs89fjnk245890'
               /&gt;
          &lt;/div&gt;
      )
  }
  
  export default Donate;
  </code></pre>
  <pre><code>import styled from 'styled-components'
  
  const ButtonStyled = styled.button`
      background-color = ${({ bg }) =&gt; bg};
      color : ${({color}) =&gt; 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;
      &amp;:hover{
          color: white;
          background-color: #62D3FC;
      }
  
  `;
  export default ButtonStyled;
  </code></pre>
  <p>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 <a href="https://i.stack.imgur.com/3CYni.png" rel="nofollow noreferrer">Show in Browser</a>
  <a href="https://i.stack.imgur.com/4TNwq.png" rel="nofollow noreferrer">This I want showing</a> but i want multiple modal.</p>
  <p>and i get a new Problem when i duplicate Modalcom then in browser dont duplicated</p>