Cómo alternar la clase para el único elemento al hacer clic en reaccionar
Estoy tratando de hacer un juego de cartas invertido en React. Puedes ver mi código a continuación. Cuando hago clic en la tarjeta, todos voltearon, pero mi objetivo es voltear solo aquellos en los que hice clic. ¿Cómo puedo hacer esto?
Este es mi componente de tarjeta:
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>);
}
}
Aquí está mi componente de cubierta:
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>)
}
};
¡Gracias!