Pass modal window by reference?

Question

JavaScript

There is a button:

const WeatherPageJumbotronButton=()=> {
    return(
    <a className="btn btn-primary btn-lg "  role="button">
            Choice country
    </a>
    )
}

On click, I'm trying to implement a popup modal with the following code:

const ModalWindowFromWeatherPageButton=(props)=>{
    const {Weather}=props
    const ShowMeCountry=<section>{Weather.country}</section>;
    return(

        <div className="modal" tabIndex="-1" role="dialog">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <ul>
                            <li>{ShowMeCountry}</li>
                        </ul>
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

    )
}

How to implement in React passing by reference of another component?
Or is it easier to just create a click that will call my modal window?
A little confused :/

Answer 1

It is possible through #anchor
JS code to parse the current URL and create a modal window if it does not exist.
And in the general case, if you need a link, then it's better not to make a modal window, IMHO.

Answer 2

Read about what a dropdown select is. Well, you should use it.
Regarding the second question, read about what client routing is. The standard in React development is react-router .