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

Question

I am trying to make a flipped set of cards in React. You can see my code below. When I click on the card, they all flipped, but my goal is to flip only those that i clicked on. How can I do this?

This is my card component:

import React from 'react';

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

Here is my Deck component:

import React from 'react';
import Card from './Card.js';

const cardlist = require('../cardlist').cardlist;

export default class Deck extends React.Component{
    constructor(props) {
        super(props);
        this.state = {flipped: false};
    }
    handleClick() {
        this.setState({flipped: !this.state.flipped});
    }
    render() {
        const list = this.props.cards.map((card, index) => {
            return <Card
                         key={index}
                         handleClick={this.handleClick.bind(this)}
                         condition={this.state.flipped}
                         image={cardlist[card].path}
                    />});
        return(
            <ul>
                {list}
            </ul>)
    }
};

Thank you!

you need to store your cards with some kind of id per each and pass the id back to the handler. this way you will be able to follow which card has been clicked, then change its state. — Sagiv b.g
– Sagiv b.g, Commented Jan 16, 2018 at 20:35

simbathesailor · Accepted Answer · 2018-01-16 20:41:53Z

8

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>);
    }
}

answered Jan 16, 2018 at 20:41

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lev Vysokiy Over a year ago

It works, but I would change {!flipped && <div className="front">} to let className = this.props.flipped ? 'card-component flipped' : 'card-component';

Labib Ismaiel · Accepted Answer · 2018-01-16 20:36:46Z

0

in the handleClick function you are setting the "flipped" state variable for the whole deck not for a single card, that's why the whole deck changes together. the solution would be simple to have a state for each card to designate if it's flipped or not, rather than making the variable on the parent level

answered Jan 16, 2018 at 20:36

Labib Ismaiel

1,3402 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related