For this project, I use React.js and mdbootstrap. Currently, TableList is displayed on the left of every page. Unfortunately also at the Login page. My question is how can I remove TableList from there, but leave it on the other pages?
Does it have to be called up later? or elsewhere?
const App = () => {
const [showAdminContent, setShowAdminContent] = useState(false);
const [currentUser, setCurrentUser] = useState(undefined);
useEffect(() => {
const user = AuthService.getCurrentUser();
if (user) {
setCurrentUser(user);
setShowAdminContent(true);
}
}, []);
const logOut = () => {
AuthService.logout();
};
const bgcolor = { backgroundColor: '#1e63e9' }
return (
<Router>
<div>
<MDBNavbar style={bgcolor} dark expand="md">
<MDBNavbarBrand>
<strong className="white-text">App</strong>
</MDBNavbarBrand>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="/list">Table List</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<span className="mr-2">Dropdown</span>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="/list">Table List</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className="md-form my-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
</div>
</MDBFormInline>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/" onClick={logOut}>logOut</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBNavbar>
<div className="container">
<div className="mb-3 ml-1 mr-3 mt-3 ">
<TableList />
</div>
<div>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/table" component={AdminTables} />
<Route path="/switchtable" component={TabSwitch} />
<Route path="/list" component={test} />
</Switch>
</div>
</div>
</div>
</Router>
);
The solution was to first render the login and then call up the App.js, which is responsible for everything except login.