Expected behavior Card flips in place Actual behavior Card flips but shows back-face below

class ReservationCard extends Component { constructor(props){ super();

this.state = {flipped:false}
this.resDay = new Date(props.reservationDate).toLocaleString("en-GB", {
  weekday: 'long'
});
this.resDate = new Date(props.reservationDate).toLocaleString("en-GB", {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
this.onChange = this.onChange.bind(this);
this.handleFlipping = this.handleFlipping.bind(this);

} onChange() { this.setState({ flipped: !this.state.flipped, }); }; handleFlipping = (e) =>{ this.setState({ flipped: !this.state.flipped, }); //this.setState({flipped: !this.flipped}) this.props.handleFlipping(!this.state.flipped); };

render() { return (

      >
        {this.resDay}
      </h5>
      <h5 className="MDBCardHeader"
        style={{ textAlign: 'center' }}>
        {this.resDate}
      </h5>
      <MDBCardImage
        cascade
        className='img-fluid'
        src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg'
      />
      <MDBBtn

        tag='a'
        className='ml-auto mr-1 lighten-3 mdb-coalor'
        onClick={this.handleFlipping}
        onChange={this.onChange}
      >
        <MDBIcon icon='chevron-right' />
      </MDBBtn>
        <MDBCardBody cascade>
          <MDBCardTitle>{`User: ${this.props.reservationUser}`}</MDBCardTitle>
            <MDBCardText>
              Some quick example text to build on the card title and make
              up the bulk of the card's content.
            </MDBCardText>
        </MDBCardBody>
        <div className='rounded-bottom mdb-color lighten-3 text-center pt-3'>
          <ul className='list-unstyled list-inline font-small'>
            <li className='list-inline-item pr-2 white-text'>
                <MDBIcon icon='clock' /> 05/10/2015
            </li>
            <li className='list-inline-item pr-2'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='comments' /> 12
                </a>
            </li>
            <li className='list-inline-item pr-2'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='facebook' brand /> 21
                </a>
            </li>
            <li className='list-inline-item'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='twitter' brand /> 5
                </a>
            </li>
          </ul>
        </div>
      </MDBCard>
      <MDBCard className='face back' cascade >
      <h5 className="MDBCardHeader"
        style={{ textAlign: 'center' }}

      >
        {this.resDay}
      </h5>
      <h5 className="MDBCardHeader"
        style={{ textAlign: 'center' }}>
        {this.resDate}
      </h5>
      <MDBCardImage
        cascade
        className='img-fluid'
        src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg'
      />
      <MDBBtn

        tag='a'
        className='ml-auto mr-1 lighten-3 mdb-coalor'
        onClick={this.handleFlipping}
        onChange={this.onChange}
      >
        <MDBIcon icon='chevron-right' />
      </MDBBtn>
        <MDBCardBody cascade>
          <MDBCardTitle>{`User: ${this.props.reservationUser}`}</MDBCardTitle>
            <MDBCardText>
              The Back
            </MDBCardText>
        </MDBCardBody>
        <div className='rounded-bottom mdb-color lighten-3 text-center pt-3'>
          <ul className='list-unstyled list-inline font-small'>
            <li className='list-inline-item pr-2 white-text'>
                <MDBIcon icon='clock' /> 05/10/2015
            </li>
            <li className='list-inline-item pr-2'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='comments' /> 12
                </a>
            </li>
            <li className='list-inline-item pr-2'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='facebook' brand /> 21
                </a>
            </li>
            <li className='list-inline-item'>
                <a href='#!' className='white-text'>
                <MDBIcon icon='twitter' brand /> 5
                </a>
            </li>
          </ul>
        </div>
      </MDBCard>
    </MDBRotatingCard>
)

} }

export default ReservationCard;