How to open a bootstrap modal present in a component from another component in react?

Question

I'm pretty new reactJS. I have a component for bootstrap card shown below,

const Card = (props) => {
return (
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-12">
  <div className="card">
    <a data-src="https://www.youtube.com/embed/A-twOC3W558" data-toggle="modal" data-target="#myModal"><img className="card-img-top" src={props.avatar_url} alt="card" /></a>
    <div className="card-body">
      <h3 className="card-title">{props.login}</h3>
      <p className="card-text">{props.events_url}</p>
    </div>
  </div>
</div>
)}

It has a image inside anchor tag. My requirement was, when i click on this image it should open the bootstrap modal.

The bootstrap modal component is shown below, its actually in a different file.

class Modal extends Component {
render() {
    return (
        <div className="container">
            <div className="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-body">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div className="embed-responsive embed-responsive-16by9">
                                <iframe className="embed-responsive-item" src="" id="video" allowscriptaccess="always">></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

How can make the modal to open when I click on the image?

@AbdeslemCharif, i thought i can reuse this modal and made it a different component. — Kiran Suvarna, Mar 27 '18 at 11:29
try to added it as a child component to your card component and see if it work , but i am pretty sur it wont work — Abslen Char, Mar 27 '18 at 11:30
check this question, you can do it https://stackoverflow.com/questions/28241912/bootstrap-modal-in-react-js — Suresh Ponnukalai, Mar 27 '18 at 11:34
@SureshPonnukalai, the link talk about react-bootstrap. But i'm using bootstrap in order to make use of bootstrap-4. — Kiran Suvarna, Mar 27 '18 at 11:44
@KiranSuvarna read all the answer. There is a answer with 66 upvotes, which is giving the solution with out using react-boostrap and he used bootstrap 4 modal. — Suresh Ponnukalai, Mar 27 '18 at 11:47

How to open a bootstrap modal present in a component from another component in react?

0 Answers0