switch icons on button click in react

Question

I am using react-full-screen library.

Link to code sandbox

I have a navbar, where I have placed the JSX for the button with icons.

class AdminNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFfull: false
    };
  }

  render() {
    return (
      <Navbar className="navbar" expand="lg">
        <Container fluid>
          <div className="navbar-wrapper">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                <i className="fa fa-expand-arrows-alt"></i>
                <i className="fa compress-arrows-alt"></i>
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}

And then in my another Admin Component, I am using it as props and performing the onClick()

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFull: false
    };
  }

  goFull = () => {
    if (document.body.classList.contains("btn-fullscreen")) {
      this.setState({ isFull: true });
    } else {
      this.setState({ isFull: false });
    }
    document.body.classList.toggle("btn-fullscreen");
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel">
            <AdminNavbar {...this.props} goFull={this.goFull} />
          </div>
        </div>
      </Fullscreen>
    );
  }
} 

Problem: the icons are not changing on click of the button. I also tried using the active class. but no luck.

Answer 1

You don't have to check the classList on body. The icon toggle can be achieved by state change.Please have a look at the code.

import React from "react";

import AdminNavbar from "./AdminNavbar";

import Fullscreen from "react-full-screen";

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFull: false
    };
  }

  goFull = () => {
    this.setState({ isFull: !this.state.isFull });
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel">
            <AdminNavbar
              {...this.props}
              isFull={this.state.isFull}
              goFull={this.goFull}
            />
          </div>
        </div>
      </Fullscreen>
    );
  }
}

export default Admin;

The admin Navbar code

import React from "react";

//  reactstrap components
import { Navbar, Container } from "reactstrap";

class AdminNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFfull: false
    };
  }

  render() {
    return (
      <Navbar className="navbar" expand="lg">
        <Container fluid>
          <div className="navbar-wrapper">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                {!this.props.isFull ? (
                  <i className="fa fa-expand-arrows-alt"></i>
                ) : (
                  <i className="fa compress-arrows-alt"></i>
                )}
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}

export default AdminNavbar;