React-fullscreen not working: goFull method is not getting triggered

Question

I have an AdminNavbar Component which contains all the things for the top horizontal navbar. This AdminNavbar Component is then imported into Admin Layout. I am using this react library to achieve on click full-screen functionality.

AdminNavbar Component has the button, onClick of which it will trigger a goFull() method and in Admin Layout, I have wrapped up all the JSX inside <FullScreen></FullScreen>

The problem is that goFull() is not getting triggered and I am not sure how to get hang of it.

Code for AdminNavbar Component

import React from "react";
//  reactstrap components
import { Navbar, NavbarBrand, 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">
            <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

            <button className="btn-fullscreen" onClick={this.goFull}>
              <i className="fa fa-expand-arrows-alt"></i>
            </button>
          </div>
        </Container>
      </Navbar>
    );
  }
}

export default AdminNavbar;

Code for Admin Layout

import React from "react";
// core components
import AdminNavbar from "components/Menu/AdminNavbar.js";

import routes from "routes/routes.js";

import Fullscreen from "react-full-screen";

var ps;

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeColor: "primary",
      sidebarMini: true,
      opacity: 0,
      sidebarOpened: false,
      isFfull: false,
    };
  }

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

export default Admin;

Answer 1

The issue is in passing the props from the Admin component to the AdminNavbar component.

Right now as per my understanding is that your button in AdminNavBar is not able to recognize method goFull().

And also there is Typo in state isFfull should be isFull

Kindly make the following changes and it will work.

In Admin

    import React from "react";
    // core components
    import AdminNavbar from "components/Menu/AdminNavbar.js";
    
    import routes from "routes/routes.js";
    
    import Fullscreen from "react-full-screen";
    
    var ps;
    
    class Admin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          activeColor: "primary",
          sidebarMini: true,
          opacity: 0,
          sidebarOpened: false,
          isFull: false,
        };
      }
    
      goFull = () => {
        this.setState({ isFull: true });
      };
      render() {
        return (
          <Fullscreen
            enabled={this.state.isFull}
            onChange={(isFull) => this.setState({ isFull })}
          >
            <div className="wrapper">
              <div className="main-panel" ref="mainPanel">
                <AdminNavbar
                  {...this.props}
                  goFull={this.goFull}
                  brandText={this.getActiveRoute(routes)}
                />
              </div>
            </div>
          </Fullscreen>
        );
      }
    }
    
    export default Admin;

In AdminNavbar

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

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

  render() {
    return (
    <Navbar className="navbar" expand="lg">
    <Container fluid>
      <div className="navbar-wrapper">
        <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

        <button className="btn-fullscreen" onClick={this.props.goFull}>
          <i className="fa fa-expand-arrows-alt"></i>
        </button>
      </div>
    </Container>
  </Navbar>
 );
 }
}
export default AdminNavbar;