Как исправить код чтобы при нажатии кнопки ок исчезала карточка card?

Question

[Рома]

Как исправить код чтобы при нажатии кнопки ок исчезала карточка card?

const Countries = ({data}) => {    
    const [showCard, setShowCard] = useState('none');

    const ShowOnClick = (cardId) =>{
        setShowCard(cardId)
    } 

    const CloseOnClick = () => {
        setShowCard('none')
    }    

    if (!data) {
        return (
            <h1>Loading...</h1>
        )
    }
    return (
    <table className="table">
        <thead>
            <tr>
                <th>№</th>
                <th>Country</th>
                <th>Total Confirmed</th>
            </tr>
        </thead>
        <tbody>
            {data.map((country, index) => (     
                           
                <tr onClick={() => ShowOnClick(index)} key={index}>
                    <td>{index + 1}</td>
                    <td>{country.Country}</td>
                    <td>{country.TotalConfirmed}</td>   
                    <td>
                        <div  className="card" style={{display: showCard === index ? 'grid' : 'none'}}>
                            <div className="country">{country.Country}</div>
                            <div className="stat">
                                <div className="img-heart"></div>
                                <div>Total Confirmed</div>
                                <div className="card-stat">{country.TotalConfirmed}</div>
                            </div>
                            <div className="stat">
                                <div className="img-skull"></div>
                                <div>Total Deaths</div>
                                <div className="card-stat">{country.TotalDeaths}</div>
                            </div>
                            <div className="stat">
                                <div className="img-plus"></div>
                                <div>Total Recovered</div>
                                <div className="card-stat">{country.TotalRecovered}</div>
                            </div>
                            <button onClick={CloseOnClick} className="btn">OK</button>
                        </div>                
                    </td>                 
                </tr>
            ))}
        </tbody>
    </table>
    )
};

Comments

[0xD34F]

Погуглите, что такое всплытие событий.

[Рома]

0xD34F, Да понимаю, в чем здесь ошибка. Изначально вынес в отдельную tr этот div "card" и тогда карточка нормально закрывается и открывается. Но внешний вид не тот.

[0xD34F]

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

[Рома]

Понял, исправил, сработало.
const CloseOnClick = (e) => {
e.stopPropagation();
setShowCard('none')
}