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;
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;