I have a simple hashrouter set up but when i press the button for my dropdown the content disapears, Is there a workaround ?
class App extends Component {
render () {
return (
<fragment>
<HashRouter>
<Navbar className="header">
<NavLink to="/Shop"> <NavItem icon={<IoIosBasket />} /> </NavLink>
<NavLink to="/Home"> <NavItem icon={<IoIosHome />} /> </NavLink>
<NavItem icon={<IoIosListBox />} />
<NavItem icon={<IoIosArrowDown />}>
<DropdownMenu></DropdownMenu>
</NavItem>
</Navbar>
<div className="content">
<Route path="/Home" component={Home}/>
<Route path="/Shop" component={Shop}/>
// Test text
</div>
</HashRouter>
</fragment>
);
}
}
Related
Intended function: Projects names pulled from MySQL database that are listed in table column, will be a link to /projects page listing related unique information.
What is actually happening: Project names that are pulled from MySQL database that are listed in table column, are not links.
See pics for details: https://imgur.com/a/jp1JvV0
Dashboard.js
import React, { useState, useEffect } from "react";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { Button } from "primereact/button";
// import ButtonDemo from './ButtonDemo';
import { Chart } from "primereact/chart";
import { InputText } from "primereact/inputtext";
import { InputTextarea } from "primereact/inputtextarea";
import { Modal, ModalFooter, ModalHeader } from "react-bootstrap";
import axios from "axios";
import { useHistory, Link } from "react-router-dom";
// import { Media } from "react-bootstrap/Media"
// import ProjectsTable from "./Tables/ProjectsTable";
// import TicketsPieChart from "./Tables/TicketsPieChart"
// import API from
//project table
//eslint-disable no-unused-vars
const TableDemo = () => {
// const toggle = () => {setShow(!show);}
const [project_name, setProjectName] = useState("");
const [description, setDescription] = useState("");
const [projects, setProjects] = useState([]);
const history = useHistory();
useEffect(() => {
getProjects();
}, []);
const getProjects = async () => {
const response = await axios.get("http://localhost:5002/bugtracker_table");
setProjects(response.data);
};
const saveProject = async (e) => {
e.preventDefault();
await axios.post("http://localhost:5002/bugtracker_table", {
project_name: project_name,
description: description,
});
history.push("/");
};
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<div className="grid table-demo">
<div className="col-12">
<div className="card">
<h5>Projects</h5>
<div>
<Button label="New Project" className="p-button-rounded mr-2 mb-2 npbutton" onClick={handleShow} />
</div>
<Modal className="modal" show={show} onHide={handleClose}>
<form onSubmit={saveProject}>
<div className="grid p-fluid">
<div className="col-12 md:col-6">
<div className="card">
<ModalHeader>
<h5>Projects</h5>
</ModalHeader>
<div className="grid formgrid">
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText value={project_name} onChange={(e) => setProjectName(e.target.value)} type="text" placeholder="Enter project name"></InputText>
</div>
</div>
<h5>Project Description</h5>
<InputTextarea value={description} onChange={(e) => setDescription(e.target.value)} type="text" placeholder="Enter project description" autoResize rows="3" cols="30" />
<ModalFooter>
<Button label="Submit" className="p-button-rounded p-button-success mr-2 mb-2" />
<Button onClick={handleClose}>Close</Button>
</ModalFooter>
</div>
</div>
</div>
</form>
</Modal>
{/* // <Link to="/ticketlist" className="col-12"> */}
<div>
{/* // className="card"></Link> */}
<DataTable
// sortMode="single" sortField="representative.name"
value={projects}
sortOrder={1}
scrollable
scrollHeight="400px"
responsiveLayout="scroll"
>
<Column field="project_name" header="Project Name" style={{ minWidth: "200px" }}></Column>
{/* <Column field="ticket_title" header="Ticket Title" style={{ minWidth: "200px" }}></Column> */}
<Column field="description" header="Description" style={{ minWidth: "350px" }}></Column>
<Column field="status" header="Status" style={{ minWidth: "200" }}></Column>
<Column field="createdAt" header="Date" style={{ minWidth: "200px" }}></Column>
{projects.map((project, index) => (
<tr key={project.id}>
<td>{index + 1}</td>
<td>
<Link to={`/projects/${project.id}`}>{project.project_name}</Link>
</td>
<td>{project.description}</td>
<td>{project.createdAt}</td>\{" "}
</tr>
))}
</DataTable>
</div>
</div>
</div>
<div className="grid p-fluid">
<div className="col-12 lg:col-6">
<div className="card flex flex-column align-items-center">
<h5>Tickets by Type</h5>
<Chart type="pie" focus={"type"} />
</div>
</div>
</div>
<div className="grid p-fluid">
<div className="col-12 lg:col-6">
<div className="card flex flex-column align-items-center">
<h5>Tickets by Priority</h5>
<Chart type="pie" focus={"priority"} />
</div>
</div>
</div>
<div className="grid p-fluid">
<div className="col-12 lg:col-6">
<div className="card flex flex-column align-items-center">
<h5>Tickets by Status</h5>
<Chart type="pie" focus={"status"} />
</div>
</div>
</div>
</div>
</>
);
};
export default React.memo(TableDemo);
You could do a map to the projects array into a new variable before passing it to the Datatable value parameter
const projectsToShow = projects.map(project => {
return {
...project,
project_name: <Link to={`/projects/${project.id}`}>{project.project_name}</Link>
}
})
then the DataTable can handle the display with projectsToShow instead of project
<DataTable
...
value={projectsToShow}
...
>
I have a Login Button inside the Landing Page When I click the login button the component renders inside the Landing Page. What I want to do is render a new page how do I do that with react-router v6?
I'm Creating a Shop App
This is my App.js
import Header from "./components/Header";
import Intro from "./components/Intro";
import Shelf from "./components/Shelf";
function App() {
return (
<div>
<Header />
<Intro />
<Shelf />
</div>
);
}
export default App;
Here's the intro Component:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Login from './Login';
import Signup from './Signup'
function Intro() {
return (
<div className="hero">
<div className="overlay column ai-center js-center">
<h1 className="m-0 fs-large"><em>Welcome to Furns</em></h1>
<hr />
<p className="m-0 fs-small">Worlwide known company serves the best furnitures</p>
<div className="row mt-4">
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
<Link to="/login">
<button className="login-btn-large px mx-3">Login</button>
</Link>
<Link to="/signup" >
<button className="sign-up-btn">Sign-up</button>
</Link>
</Router>
</div>
</div>
</div>
);
}
export default Intro;
And Here's my Login component:
import React from 'react';
function Login() {
return (
<div className="float shadow bg-light px-3 py-3 ai-center js-between">
<h2 className="brand color-olive">Furns</h2>
<h1 className="color-olive">Login</h1>
<form className="column">
<label htmlFor="username" className="color-olive my-1"> Username</label>
<input id="username" type="text" className="txt-box" />
<label htmlFor="password" className="color-olive my-1">Password </label>
<input id="password" type="password" className="txt-box" />
<button type="submit" className="mt-4 olive login-btn-large">Login</button>
<button className="my-1 olive bg-light btn-cancel" >Cancel</button>
</form>
</div>
);
}
export default Login;
This is how it looks like when I clicked the log in button
Login Component
If I am understanding your question and code correctly, Intro is what you are calling your landing page, and you want it to link to the other pages.
For this I suggest this refactor:
Render the Router and routes in App where Intro is currently being rendered.
Create a new route specifically for the landing intro page.
App
function App() {
return (
<Router>
<div>
<Header />
<Routes>
<Route path="/" element={<Intro />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
<Shelf />
</div>
</Router>
);
}
Intro
function Intro() {
return (
<div className="hero">
<div className="overlay column ai-center js-center">
<h1 className="m-0 fs-large"><em>Welcome to Furns</em></h1>
<hr />
<p className="m-0 fs-small">Worlwide known company serves the best furnitures</p>
<div className="row mt-4">
<Link to="/login">
<button className="login-btn-large px mx-3">Login</button>
</Link>
<Link to="/signup" >
<button className="sign-up-btn">Sign-up</button>
</Link>
</div>
</div>
</div>
);
}
If you don't want, or need, the Header and/or Shelf components to render on all pages then you can abstract these into a layout wrapper component that then renders an Outlet for wrapped routes to render into.
const PageLayout = () => (
<div>
<Header />
<Outlet />
<Shelf />
</div>
);
...
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Intro />} />
<Route path="/*" element={<PageLayout />} >
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Route>
</Routes>
</Router>
);
}
I am trying to render two images to each be 100% full screen on one of my web pages. But they are showing up super tiny. I've tried a bunch of things from styling to css but the size of the images won't change.
This is the webpage:
Below is my code:
import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {getBeers} from '../store/allBeers'
import {
Button,
ButtonGroup,
ButtonToolbar,
Dropdown,
DropdownButton
} from 'react-bootstrap'
class AdminDash extends React.Component {
render() {
// console.log('before beer......', this.props.beers)
// const beers = this.props.beers
// console.log('beer variable......', beers)
return (
<div style={{border: 'solid 1px black', height: '100vh'}}>
<ButtonToolbar aria-label="Toolbar with button groups">
<ButtonGroup className="mr-2" aria-label="First group">
<Link to="/admin/dashboard">
<Button variant="outline-info">Admin Home Page</Button>
</Link>
</ButtonGroup>
<ButtonGroup className="mr-2" aria-label="Second group">
<Link to="/admin/edit/orders">
<Button variant="outline-info">Admin Order Management</Button>
</Link>
</ButtonGroup>
<ButtonGroup className="mr-2" aria-label="Second group">
<Link to="/admin/edit/users">
<Button variant="outline-info">Admin User Management</Button>
</Link>
</ButtonGroup>
<ButtonGroup className="mr-2" aria-label="Second group">
<Link to="/admin/post/beer">
<Button variant="outline-info">Create New Product</Button>
</Link>
</ButtonGroup>
<ButtonGroup className="mr-2" aria-label="Second group">
<Link to="/admin/edit/beer/3">
<Button variant="outline-info">Edit Existing Product</Button>
</Link>
</ButtonGroup>
<ButtonGroup aria-label="Third group">
<DropdownButton
variant="outline-info"
as={ButtonGroup}
title="Admin Product Management"
id="bg-nested-dropdown"
>
<Link to="/admin/post/beer">
<Dropdown.Item eventKey="1">Create New Product</Dropdown.Item>
</Link>
<Link to="/admin/edit/beer/3">
<Dropdown.Item eventKey="2">
Update Existing Product
</Dropdown.Item>
</Link>
</DropdownButton>
</ButtonGroup>
</ButtonToolbar>
<br />
{/* <img
id="dash-image-mock"
src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248053/fundus_pics/admindash_part1_kkgphi.png"
/>
<br />
<img
id="dash-image-mock"
src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248058/fundus_pics/admindash_part2_ikbsxd.png"
/> */}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248053/fundus_pics/admindash_part1_kkgphi.png" />
<br />
<br />
<br />
<img src="https://res.cloudinary.com/dejiqayjc/image/upload/v1569248058/fundus_pics/admindash_part2_ikbsxd.png" />
</body>
</html>
</div>
)
}
}
const mapState = state => {
return {
beers: state.allBeers
}
}
// const mapDispatch = (dispatch) => {
// return {
// fetchBeers: () => dispatch(getBeers)
// }
// }
export default connect(mapState)(AdminDash)
What am I doing wrong?
I am trying to compose a navbar inside the AppBar in material-ui. I have the following code.
Currently, using #material-ui/core version 3.9.2.
class Header extends Component {
handleMenuOpen = ev => {
this.setState({ anchorAccountMenu: ev.currentTarget });
}
handleMenuClose = ev => {
this.setState({ anchorAccountMenu: null });
}
menuGotoUrl = siteUrl => ev => {
console.log(siteUrl);
this.props.history.push(siteUrl);
this.handleMenuClose(ev);
}
render() {
let { classes } = this.props;
let { anchorAccountMenu } = this.state;
const user = UserService.currentUser();
let userFirstChar = user.name.charAt(0).toUpperCase();
return (<AppBar><Toolbar>
{ /* Some more content here... */ }
<Button onClick={ this.handleMenuOpen }>
<span className={ classes.nameInButton }>{ `${user.name}` }</span>
<Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
</Button>
<Menu
id="user-menu" anchorEl={ anchorAccountMenu }
getContentAnchorEl= { null }
disableAutoFocusItem={ true }
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={ !!anchorAccountMenu } onClose={ this.handleMenuClose }>
<MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="far fa-fw fa-user" />
</ListItemIcon>
<ListItemText inset primary="Profile" />
</MenuItem>
<MenuItem onClick={ this.handleLogout }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="fas fa-fw fa-sign-out-alt" />
</ListItemIcon>
<ListItemText inset primary="Logout" />
</MenuItem>
</Menu>
</Toolbar></AppBar>)
}
}
export default withRouter(withStyles(styles)(Header));
The problem is when I select the profile menuItem, it returns me error, instead of navigate to /profile/edit via react-routes-dom and close the menu.
Error:
react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.
at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21470:25)
at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22022:18)
at ref (webpack-internal:///./node_modules/#material-ui/core/MenuList/MenuList.js:203:46)
...
...
What am I missing here? Thanks.
I finally solve it by placing <Menu/> with <MenuList />. Not sure how's it different internally. This is also the alternative of building menu from material-ui from the doc.
Specifically, this is what I do:
render() {
let { classes } = this.props;
let { anchorAccountMenu } = this.state;
const user = UserService.currentUser();
let userFirstChar = user.name.charAt(0).toUpperCase();
return (<AppBar><Toolbar>
{ /* Some more content here... */ }
<Button onClick={ this.handleMenuOpen }>
<span className={ classes.nameInButton }>{ `${user.name}` }</span>
<Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
</Button>
<Popper open={ !!anchorAccountMenu } anchorEl={ anchorAccountMenu }
transition disablePortal>{ ({ TransitionProps }) => (
<Grow {...TransitionProps} id="menu-item-grow"
style={{ transformOrigin: 'center top' }}
><Paper><ClickAwayListener onClickAway={ this.handleMenuClose }>
<MenuList>
<MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="far fa-fw fa-user" />
</ListItemIcon>
<ListItemText inset primary="Profile" />
</MenuItem>
<MenuItem onClick={ this.handleLogout }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="fas fa-fw fa-sign-out-alt" />
</ListItemIcon>
<ListItemText inset primary="Logout" />
</MenuItem>
</MenuList>
</ClickAwayListener></Paper></Grow>
) }</Popper>
</Toolbar></AppBar>)
}
}
What is the main difference between <Router> and the <Hash-router> in react.js?
In my program, i put a form tag and mention a components path in action, but I used hash-router. I am not able to switch to "mentions component" but in case of router it switches to that other component.
Why is that, and what are the other difference between the two?
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</Switch>
</div>
</div>
</HashRouter>
The form:
<form action='/stuff'>
<label for="firstName"><b>FirstName</b></label>
<input type="text" name="fname" /><br/><br/>
<label for="lastName"><b>LastName</b></label>
<input type="text" name="lname"/><br/><br/>
<button type="submit" align="right">Signup</button>
</form>