Expand div in a Class component

I’m following this react-flip-toolkit tutorial in order to animate a<div> expansion in a component:

This is the tutorial code:

import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      <Flipped flipId="square">
        <div
          className={fullScreen ? 'full-screen-square' : 'square'}
          onClick={toggleFullScreen}
        />
      </Flipped>
    </Flipper>
  )
}

---

My project however, unlike the functional Component example above, uses Class components, like so:

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

    this.state = {
      players:[],
    };
  }

getPlayersByPosition = (players, position) => {
    return players.filter((player) => player.position === position);
  };

render() {
    const { players } = this.props;
    if(players){
      return (
       <div className="back">
          <div className="field-wrapper" >
            <Output output={this.props.strategy} />

            // this is the target div I want to expand
            <div className="row"> 
               {this.getPlayersByPosition(players, 5).map((player,i) => (
                    <Position key={i} >{player.name}</Position>
                ))} 
            </div>

          </div>
        </div>
      );
  }else{
    return null}
  }
}

export default Field;

---

How can I declare AnimatedSquare() in my Class component and encapsulate my target <div> above within <Flipper/> and <Flipped/>?

Answer

I’ve converted the example to a class based component for you. You should be able to work the rest out from this example:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipped, Flipper } from "react-flip-toolkit";
import "./styles.css";

class AnimatedSquare extends Component {
  state = {
    fullScreen: false
  };
  toggleFullScreen() {
    this.setState({ fullScreen: !this.state.fullScreen });
  }
  render() {
    const { fullScreen } = this.state;
    return (
      <Flipper flipKey={fullScreen}>
        <Flipped flipId="square">
          <div
            className={fullScreen ? "full-screen-square" : "square"}
            onClick={this.toggleFullScreen.bind(this)}
          />
        </Flipped>
      </Flipper>
    );
  }
}

ReactDOM.render(<AnimatedSquare />, document.querySelector("#root"));

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.square {
  width: 5rem;
  height: 5rem;
  cursor: pointer;
  background-image: linear-gradient(
    45deg,
    rgb(121, 113, 234),
    rgb(97, 71, 182)
  );
}

.full-screen-square {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-image: linear-gradient(
    45deg,
    rgb(121, 113, 234),
    rgb(97, 71, 182)
  );
}