How to toggle class for the only one element on click in react

You can make use of indexes.

export default class Deck extends React.Component{
    constructor(props) {
        super(props);

        //flipped true nonflipped false
        this.state = {
         flipStatus : props.cards.map((element) => false)
        }
    handleClick(index) {

        const newflipStatus = [...this.state.flipStatus]
        newflipStatus[index] = !this.state.flipStatus[index]
        this.setState({flipStatus: newflipStatus);
    }
    render() {
        const list = this.props.cards.map((card, index) => {
            return <Card
                         key={index}
                         handleClick={this.handleClick.bind(this)}
                         condition={this.state.flipped}
                         index={index}
                         image={cardlist[card].path}
                         flipped=this.state.flipStatus[index]

                    />});
        return(
            <ul>
                {list}
            </ul>)
    }
};

here is your card component

export default class Card extends React.Component {
    render() {
        let className = this.props.condition ? 'card-component flipped' : 'card-component';
        return (
            <div onClick={() => this.props.handleClick(this.props.index)} className={className}>
                {!flipped && <div className="front">
                    <img src={this.props.image} alt="card"/>
                </div>}
                {flipped && <div className="back">
                </div>}
            </div>);
    }
}