Material-UI components inside front/back components

[mjsevilla]

Your docs say to simply fill the front and back components with anything. My app is using the react material-ui library; can I essentially use the Card component (material-ui) wrapped with your front and back components? My idea below:

<ReactCardFlip isFlipped={this.state.isFlipped}>
  <FrontComponent key="front">
     <Card>
     </Card>
  </FrontComponent>

  <BackComponent key="back">
     <Card>
     </Card>
  </BackComponent>
</ReactCardFlip>

[lotusms]

Per the author, the FrontComponent and BackComponents are to be swapped by your idea of a front and back component. i.e

    `<Card className="FrontComponent">
           //...your front content here
     </Card>
     <Card className="BackComponent">
           //...your front content here
     </Card>`

or

    `<Paper className="FrontComponent">
           //...your front content here
     </Paper>
     <Paper className="BackComponent">
           //...your front content here
     </Paper>`

or simply

    `<div className="FrontComponent">
           //...your front content here
     </div>
     <div className="BackComponent">
           //...your front content here
     </div>`

[mjsevilla]

So what you're saying is that it's more of an idea of a front and back to a Card, rather than an actually defined front and back?

[lotusms]

yup. I'm guessing the author didn't want to assume everyone's preference on front and back components. I, for instance, use divs. I don't see why you wouldn't be able to use Cards. They render as divs anyway. Be mindful, there may be some Card properties that will be inherited but functionality-wise, you're safe.

The author can weigh in and correct me if I am wrong. But I had this same question for him before

[AaronCCWong]

If I am understand @mjsevilla's problem correctly then yes, when I say FrontComponent, I mean to say YOUR front component as in the component that you want to be in front of the card. Likewise for the back.

The important part is passing the key="front" and key="back" as props to your components. This tells ReactCardFlip which component should be in the front and which should be in the back.

I will update the docs to make these points clearer as per #6.