refactor of slack stuff

MyComponent.js

class MyComponent extends Component {
  render() {
    const cards = this.props.data.map(card => (
      <Card card={card} key={card.id} />
    ))
    
    return (
      <div style={contentStyles.root}>
        {cards}
      </div>
    )
  }
}

class Card extends Component {
  constructor() {
    super()
    this.state = {isFlipped: false}
  }
  
  handleClick = (e) => {
    // do things
  }
  
  render() {
    const {definition, term} = this.props.card

    return (
      <ReactCardFlip
        isFlipped={this.state.isFlipped}
        flipSpeedBackToFront={1.0}
        flipSpeedFrontToBack={1.0}
      >
        <div key="front" onClick={this.handleClick}>
          <Paper style={contentStyles.paper}>
            <span>{data.definition} </span>
          </Paper>
        </div>
        <div key="back" onClick={this.handleClick}>
          <Paper style={contentStyles.paper}>
            <span>{data.term}</span>
          </Paper>
        </div>
      </ReactCardFlip>
    )
  }
}