import React, {Component} from 'react';
import './App.css';

const cards = ['Card 1', 'Card 2', 'Card 3'];

const Card = props => (
  <div
    onClick={props.handleClick}
    className="Card"
    style={{transform: props.selected && 'scale(1.5)'}}>
    <div>{props.children}</div>
  </div>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: null,
    };
  }

  render() {
    return (
      <div className="App">
        {cards.map(card => (
          <Card
            key={card}
            selected={this.state.selected === card}
            handleClick={() => this.setState({selected: card})}>
            {card}
          </Card>
        ))}
      </div>
    );
  }
}

export default App;