Передать модальное окно по ссылке?

Question

[thistlemr11]

Есть кнопка:

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

По клику на неё я пытаюсь реализовать появляющееся модальное окно со следующим кодом:

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>

    )
}

Как вообще реализовать в Реакте передачу по ссылке другого компонента?
Или проще просто создать клик,который будет вызывать моё модальное окно?
Запутался немножко :/

Comments

[Robur]

И в чем именно проблема?
по клику на кнопку меняйте где-то в аппе (скорее всего можно в компоненте выше по дереву в котором и кнопка и модал лежат) в стейте флаг который определяет показывать модальное окно или нет.
В зависимости от этого флага рендерите модальное окно или не рендерите.

Answer 1

[dollar]

Можно через #анкор
JS код анализирует текущий URL и создаёт модальное окно, если его нет.

А в общем случае, если нужно по ссылке, то лучше не делать модальное окно, имхо.

Comments

[thistlemr11]

У меня просто приложение,в котором по клику на кнопочку мне выводит список стран,выбрав страну,я выбираю город. Мне кажется через выпадающее меню реализовывать всё это-слишком уж не эстетично

[dollar]

Пример, где нет модального окна совсем:
https://www.apple.com/choose-country-region/

И вроде ничего, никто не жалуется.
Так что решение, где несколько переходов со страницы на страницу, вполне норм. По крайней мере, ваша проблема отпадёт сама собой.

[thistlemr11]

dollar, Хм,что ж,спасибо,неплохо сделано,однако.

Answer 2

[Антон Спирин]

Почитайте о том, что такое dropdown select. По-хорошему вы должны использовать его.
По поводу второго вопроса почитайте о том, что такое клиентский роутинг. Стандартом в React разработке считается react-router.