@Roma23

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

Как исправить код чтобы при нажатии кнопки ок исчезала карточка 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>
    )
};
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы