ReactJS-通过单击项目打开弹出窗口

Question

我想在单击某个项目时打开一个弹出窗口，然后在此弹出窗口上显示我的项目内容。

为此，我将项目放置在popUp按钮中。这是正确的吗？如果没有，请帮忙怎么做。

            <Popup trigger={<button>{<div>
                <div className="visitedCountryImg">
                    <img src={props.imageSrc}/>
                </div>
                <div className="visitedCountryName" >
                    <h1>{props.name}</h1>
                    <p style={style}>Sale</p>
                </div>
                <div className="visitedCountryDescription">
                    <p>{props.description}</p>
                </div>
                <div className="visitedCountryPrice">
                    <h2>{props.price}</h2>
                </div>
            </div>}</button>} position="right center">
                <div className="visitedCountryImg">
                    <img src={props.imageSrc}/>
                </div>
                <div className="visitedCountryName" >
                    <h1>{props.name}</h1>
                    <p style={style}>Sale</p>
                </div>
                <div className="visitedCountryDescription">
                    <p>{props.description}</p>
                </div>
                <div className="visitedCountryPrice">
                    <h2>{props.price}</h2>
                </div>
            </Popup>
        </div>