I'm quite new to reactjs and I'm working on a simple page that uses authentication using state. Also, for styling I'm using MaterialUI framework.
I'm trying to send the loggedInStatus prop.
I think I'm sending the props correctly, but I think that I'm messing my code with receiving the props... :S
My App.js is as follows:
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/home/Home';
import SignIn from './components/auth/SignIn';
import Contacto from './components/contacto/Contacto'
import FamCatalog from './components/famCatalog/FamCatalog'
import ProtectedRoute from './components/protected/ProtectedRoute'
import PageError from './components/404/PageError';
class App extends Component {
constructor() {
super();
this.state = {
loggedInStatus: 'NOT_LOGGED_IN',
user: {}
}
}
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route
exact
path='/'
render={props => (
<Home {...props} loggedInStatus={this.state.loggedInStatus} />
)}
/>
<Route path='/signin' component={SignIn} />
<ProtectedRoute path='/famcatalog' component={FamCatalog} />
<Route path='/contacto' component={Contacto} />
<Route path='*' component={PageError} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Then, the child component is as follows:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
<h1>Status: {this.props.loggedInStatus}</h1>
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
...Blah, Blah, Blah...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
...Blah, Blah, Blah...
</Typography>
</div >
)
}
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return <Nested />
}
}
export default Home;
I can't get the props. I still have the error: "TypeError: Cannot read property 'props' of undefined" and also have a warning saying Useless constructor for the constructor created inside Home class.
I'm trying to implement the workflow explained in: https://www.youtube.com/watch?v=zSt5G3s3OJI inside my code. As I didn't have a class component, I needed to re-arranged my Home component to satisfy the class component following the guidelines in (maybe here is the error...):
https://material-ui.com/styles/advanced/
Any tip of advice in what I'm doing wrong will be very well received!
Thanks in advance!
EDIT
In order to responder #HermitCrab, my new Home.js component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... some text ...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... some text ...
</Typography>
</div >
)
}
render() {
return <Nested />
}
}
export default Home;
And I'm getting this error: error
thanks in advance!
EDIT #2
I'm trying a couple of things. Here is a way I introduced the function content into the Home Component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
render() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... TEXT
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... TEXT
</Typography>
</div >
)
}
}
export default Home;
In the local:3000 I'm getting the following error:
error in browser
I'm quite lost here. How do I include the nested function inside the Home class to get the props?
Any tip of advice will be very well received.
Thanks in advance!
Your function Nested is outside of your Home component, therefore this is undefined and you can't access this.props. You have to move your Nested function inside your Home component if you want to be able to access the props passed to Home
Related
I am trying to create a page that contains a list of cards. I designed the Header of the page but as a beginner, but I created it in my own way.
Problem is that when I am trying to display the card in the new Grid container its will not showing the desired result.
Here the Image with the head I created
Here the I the problem picture when I try to put Grid container
My Style and Code :
import { AppBar, Avatar, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Grid, IconButton, makeStyles, Toolbar, Typography } from '#material-ui/core';
import React from 'react';
import MenuIcon from '#material-ui/icons/Menu';
import { Link } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
blackBox: {
backgroundColor: 'black',
height: '350px'
},
AppBar: {
'&.MuiAppBar-positionFixed': {
top: '60px',
right: '126px',
'#media (max-width: 576px)': {
right: '42px'
}
},
width: '85%',
},
large: {
width: theme.spacing(10),
height: theme.spacing(10),
},
link: {
color: 'white',
textDecoration: 'none',
marginLeft: '30px',
fontFamily: 'Times new roman'
},
headText: {
marginTop: '130px',
'#media (max-width: 576px)': {
marginTop: '170px',
}
},
title: {
color: 'white',
'#media (max-width: 576px)': {
fontSize: '30px'
}
},
titleDesc: {
color: 'white',
'#media (max-width: 576px)': {
width: '235px'
}
}
}))
export default function CoursesView() {
const classes = useStyles();
return (
<>
<Grid container
direction="column"
// justify="space-evenly"
alignItems="center"
className={classes.blackBox}
>
<Grid item >
<AppBar className={classes.AppBar} color='transparent'>
<Toolbar>
{/* <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton> */}
<div style={{ flexGrow: '1' }}>
<Avatar alt="Remy Sharp" src="https://seeklogo.com/images/F/forex-logo-6B4D0AB43E-seeklogo.com.png" className={classes.large} />
</div>
<Link to='/play' className={classes.link}>Home</Link>
<Link to='/play' className={classes.link}>Courses</Link>
<Link to='/play' className={classes.link}>The Trade Signal</Link>
<Link to='/play' className={classes.link}>About</Link>
<Link to='/play' className={classes.link}>My Account</Link>
<Link to='/play' className={classes.link}>My Crat</Link>
</Toolbar>
</AppBar>
</Grid>
<Grid item container className={classes.headText} direction="column"
justify="center"
alignItems="center">
<Typography variant="h2" className={classes.title}>
Courses
</Typography>
<Typography variant="p" className={classes.titleDesc}>
our uniqly designed courses will help you in your specific areas of needs
</Typography>
</Grid>
</Grid>
<Grid container>
<h1>The cards wil display Here</h1>
</Grid>
</>
)
}
enter code here
The main app file that renders this app
import React from "react";
import CourseListView from "./components/pages/CourseListView";
import VideoPlayView from "./components/pages/VideoPlayView";
import { Route, Switch } from "react-router-dom";
import { makeStyles, ThemeProvider } from "#material-ui/core/styles";
import { createMuiTheme } from '#material-ui/core';
import CoursesView from "./components/pages/CoursesView";
const useStyles = makeStyles({
container: {
display: "flex"
}
});
const theme = createMuiTheme({
palette: {
primary: {
main: "#333996",
light: "#3c44b126"
},
secondary: {
main: "#f83245",
light: "#f8324526"
},
background: {
default: "#f4f5fd"
},
},
overrides: {
MuiAppBar: {
root: {
transform: 'translateZ(0)',
}
}
}
})
export default function App() {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<div className={classes.container}>
<Switch>
<Route exact from="/" render={props => <CourseListView {...props} />} />
<Route exact from="/play" render={props => <VideoPlayView {...props} />} />
<Route exact from="/Home" render={props => <CoursesView {...props} />} />
</Switch>
</div>
</ThemeProvider>
);
}
try this :
container: {
display: "flex",
flexDirection: column
}
I've tried everything but fail to render component when URL changes. No error messages nothing, it renders Home component but when i click on (view and edit icon)Link it just changes url, component does not render nothing happens. I couldn't find a solution, is there any way to make it work?
App.js
import "./App.css";
// import { TextFilledComp } from './Components/TextFilledComp';
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";
function App() {
return (
<div>
<Routes>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Route exact path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:TodoId" element={<EditTodo />} />
</div>
</div>
</Routes>
</div>
);
}
export default App;
Todo.js
import {
Checkbox,
List,
ListItem,
ListItemSecondaryAction,
ListItemText,
makeStyles
} from "#material-ui/core";
import DeleteIcon from "#material-ui/icons/Delete";
import EditIcon from "#material-ui/icons/Edit";
import CheckBoxIcon from "#material-ui/icons/CheckBox";
import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
const useStyles = makeStyles({
listRoot: {
borderWidth: "1px",
borderColor: "#aaaaaa",
borderStyle: "solid",
borderRadius: "20px"
}
});
export const TodoList = () => {
const todos = useSelector((state) => state.todo);
const classes = useStyles();
return (
<div style={{ width: "95%", margin: "10px auto" }}>
<List>
{todos.map((todo) => (
<ListItem key={todo.id} className={classes.listRoot}>
<ListItemText primary={todo.name} />
<ListItemSecondaryAction>
{/* <Checkbox
edge="end"
/> */}
<CheckBoxIcon color="primary" />
<DeleteIcon color="secondary" />
<Link to={`/edit/${todo.id}`} className="button">
<EditIcon />
</Link>
<Link to={`/todo/${todo.id}`}>view</Link>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</div>
);
};
codesandbox link for complete app
A Routes component is the replacement for Switch from v5 and should only wrap around Route components. It's solely responsible for matching the provided paths and controlling the visibility of Routes and does not know what to do with regular JSX.
function App() {
return (
<div>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:todoId" element={<EditTodo />} />
</Routes>
</div>
</div>
</div>
);
}
I've also removed the exact prop as it is deprecated in v6 since all Routes are exact by default. To allow non-exact Routes, use the new path="/nonexact/*" syntax. Some more info on the new features can be found here.
I am trying to create a main page with 2 buttons in React.js: Option 1 and Option 2. If a user clicks on Option 1, this user should be redirected to Main1 page. If he/she clicks on Option 2, then this user is redirected to Main2. Sounds quite simple, but I get the following error:
TypeError: Cannot read property 'renderView' of null
App.render
C:/test/src/App.js:15
12 |
13 | render() {
14 |
> 15 | switch (this.state.renderView) {
| ^ 16 | case 1:
17 | return (
18 | <div className="App">
This is my code of App.js:
import React, { Component } from 'react';
import './App.css';
import { Header } from './components/Header';
import { Header1 } from './components/xai/Header1';
import { Header2 } from './components/fairness/Header2';
import { Main } from './components/Main';
import { Main1 } from './components/xai/Main1';
import { Main2 } from './components/fairness/Main2';
class App extends Component {
clickBtn = e => {
console.log(e.target.value);
this.setState({
renderView: +e.target.parentNode.value
});
};
render() {
switch (this.state.renderView) {
case 1:
return (
<div className="App">
<div className="App-header">
<Header1 />
</div>
<div className="App-main">
<Main1 />
</div>
</div>
);
case 2:
return (
<div className="App">
<div className="App-header">
<Header2 />
</div>
<div className="App-main">
<Main2 />
</div>
</div>
);
default:
return (
<div className="App">
<div className="App-header">
<Header />
</div>
<div className="App-main">
<Main clickBtn={this.clickBtn} />
</div>
</div>
);
}
}
}
export default App;
This is the code of Main.js where I have two buttons:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import Card from "#material-ui/core/Card";
import CardContent from "#material-ui/core/CardContent";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles({
card: {
minWidth: 350
},
button: {
fontSize: "12px",
margin: "theme.spacing.unit",
minWidth: 350
},
extendedIcon: {
marginRight: "theme.spacing.unit"
},
title: {
fontSize: '20px',
minWidth: 350,
margin: "theme.spacing.unit"
}
});
export function Main() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Card className={classes.card}>
<Typography align="center" className={classes.title}>
Select the option
</Typography>
<CardContent>
<Grid item xs={3}>
<Button
variant="contained"
size="medium"
color="primary"
className={classes.button}
value="1"
onClick={this.props.clickBtn}
>
Option 1
</Button>
</Grid>
<Grid item xs={3}>
<Button
variant="contained"
size="medium"
color="primary"
className={classes.button}
value="2"
onClick={this.props.clickBtn}
>
Option 2
</Button>
</Grid>
</CardContent>
</Card>
</Grid>
</React.Fragment>
);
}
How to fix this issue?
If other classes should be provided here, please let me know.
You didn't create state for the App component:
class App extends Component {
state = {renderView: null}
render(){
...
And note that this.clickBtn is undefined too, so you gotta define it.
since Main.js is a functional component it doesn't include the this keyword.
export function Main(props){
....
onClick={props.clickBtn}
I'm completely new in MaterialUI. I'm working on my first project right now and trying to make use of templates form its page. I've loaded two .tsx files with log in view and main dashboard view. I'd like to show main dashboard view after clicking Login button on log in view. Both files have its own export default function FnName() function with const classes = useStyles(); and it seems to cause my problems. The way of using hooks is the issue here I guess. But how to pass this function to onClick handler event button? You can see my project here:
https://codesandbox.io/s/adoring-leftpad-6nwv2?file=/src/SignIn.tsx
Somebody can help?
Please check this example:
App Component
import React, {useEffect, useState} from 'react';
import SignIn from "./material-ui/signin-template/SignIn";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { createBrowserHistory as history} from 'history';
import MiniDrawer from "./material-ui/signin-template/Dashboard";
class App extends React.Component {
render() {
return (
<div>
<Router history={history}>
<Switch>
<Route path="/" exact component={SignIn}/>
<Route path="/dashboard" component={MiniDrawer}/>
</Switch>
</Router>
</div>
)
}
}
export default App;
SingIn Component
import React from "react";
import Avatar from "#material-ui/core/Avatar";
import Button from "#material-ui/core/Button";
import CssBaseline from "#material-ui/core/CssBaseline";
import TextField from "#material-ui/core/TextField";
import FormControlLabel from "#material-ui/core/FormControlLabel";
import Checkbox from "#material-ui/core/Checkbox";
import Link from "#material-ui/core/Link";
import Grid from "#material-ui/core/Grid";
import Box from "#material-ui/core/Box";
import LockOutlinedIcon from "#material-ui/icons/LockOutlined";
import Typography from "#material-ui/core/Typography";
import {makeStyles} from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
import {Redirect, useHistory} from "react-router-dom";
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{"Copyright © "}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
export default function SignIn() {
const classes = useStyles();
let history = useHistory();
return (
<Container component="main" maxWidth="xs">
<CssBaseline/>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon/>
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary"/>}
label="Remember me"
/>
<Button
onClick={()=>{
history.push('/dashboard')
}}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>
<Copyright/>
</Box>
</Container>
);
}
Dashboard Component
import React from "react";
import clsx from "clsx";
import {
createStyles,
makeStyles,
useTheme,
Theme
} from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import Drawer from "#material-ui/core/Drawer";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import List from "#material-ui/core/List";
import CssBaseline from "#material-ui/core/CssBaseline";
import Typography from "#material-ui/core/Typography";
import Divider from "#material-ui/core/Divider";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeft";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import InboxIcon from "#material-ui/icons/MoveToInbox";
import MailIcon from "#material-ui/icons/Mail";
import MapOutlinedIcon from "#material-ui/icons/MapOutlined";
import DriveEtaOutlinedIcon from "#material-ui/icons/DriveEtaOutlined";
import PeopleAltOutlinedIcon from "#material-ui/icons/PeopleAltOutlined";
import DirectionsOutlinedIcon from "#material-ui/icons/DirectionsOutlined";
import AssessmentOutlinedIcon from "#material-ui/icons/AssessmentOutlined";
import ReportProblemOutlinedIcon from "#material-ui/icons/ReportProblemOutlined";
import AccountCircleOutlinedIcon from "#material-ui/icons/AccountCircleOutlined";
import { Redirect, useHistory } from "react-router-dom";
import ExitToAppIcon from "#material-ui/icons/ExitToApp";
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: "flex"
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
menuButton: {
marginRight: 36
},
hide: {
display: "none"
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap"
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: "hidden",
width: theme.spacing(7) + 1,
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9) + 1
}
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar
},
content: {
flexGrow: 1,
padding: theme.spacing(3)
}
})
);
function MiniDrawer() {
const classes = useStyles();
let history = useHistory();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open
})}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
})
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<div className={classes.toolbar} />
<div className={classes.toolbar} />
<div className={classes.toolbar} />
<IconButton
onClick={() => {
history.push("/");
}}
>
<ExitToAppIcon />
</IconButton>
<Divider />
<List>
{["Mapa", "Pojazdy", "Kierowcy", "Trasy", "Raporty", "Alerty"].map(
(text, index) => (
<ListItem
button
key={text}
onClick={event => {
console.log(event.currentTarget);
history.push("/");
}}
>
<ListItemIcon>
{index === 0 && <MapOutlinedIcon />}
{index === 1 && <DriveEtaOutlinedIcon />}
{index === 2 && <PeopleAltOutlinedIcon />}
{index === 3 && <DirectionsOutlinedIcon />}
{index === 4 && <AssessmentOutlinedIcon />}
{index === 5 && <ReportProblemOutlinedIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
)
)}
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<Typography paragraph />
</main>
</div>
);
}
export default MiniDrawer;
Here is the Code Sandbox
I am trying to create an image gallery using react-grid-gallery.
I used the example code to quickly get something on the page. However, the tag either displays nothing or if I add a div with my images I then get a gallery displayed twice. It works but it obviously does not look very good overall.
import React from 'react'
import { NavLink } from 'react-router-dom'
let brand = 'app/images/brand.png'
import { render } from 'react-dom'
import Gallery from 'react-grid-gallery'
let gallery1 = 'app/images/gallery1.jpg'
let gallery2 = 'app/images/gallery2.jpg'
let gallery3 = 'app/images/gallery3.jpg'
let gallery4 = 'app/images/gallery4.jpg'
let gallery5 = 'app/images/gallery5.jpg'
let gallery6 = 'app/images/gallery6.jpg'
const IMAGES =
[
{
src: 'app/images/gallery1.jpg',
thumbnail: 'app/images/gallery1.jpg',
thumbnailWidth: 800,
thumbnailHeight: 800,
},
{
src: 'app/images/gallery2.jpg',
thumbnail: 'app/images/gallery2.jpg',
thumbnailWidth: 800,
thumbnailHeight: 800,
},
{
src: 'app/images/gallery3.jpg',
thumbnail: 'app/images/gallery3.jpg',
thumbnailWidth: 800,
thumbnailHeight: 800,
},
{
src: 'app/images/gallery4.jpg',
thumbnail: 'app/images/gallery4.jpg',
thumbnailWidth: 800,
thumbnailHeight: 800,
},
{
src: 'app/images/gallery5.jpg',
thumbnail: 'app/images/gallery5.jpg',
thumbnailWidth: 800,
thumbnailHeight: 800,
},
export class GalleryCarousel extends React.Component {
render() {
return (
<div className='home-container'>
<NavLink to='/' style={{marginTop: 80}}>
<img src={brand} alt={'img for brand'} />
</NavLink>
<div className=''>
<div className='tile' ><img src={gallery1} alt=''/></div>
<div className='tile' ><img src={gallery2} alt=''/></div>
<div className='tile' ><img src={gallery3} alt=''/></div>
<div className='tile' ><img src={gallery4} alt=''/></div>
<div className='tile' ><img src={gallery5} alt=''/></div>
<div className='tile' ><img src={gallery6} alt=''/></div>
<Gallery images={IMAGES} backdropClosesModal={true}/>
</div>
</div>
)
}
}
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Nav} from './Nav'
import {Home} from './Home'
import {About} from './About'
import {Press} from './Press'
import {GalleryCarousel} from './Gallery'
import {Contact} from './Contact'
import {Footer} from './Footer'
let ReactRouter = require('react-router-dom')
let Router = ReactRouter.BrowserRouter;
let Route = ReactRouter.Route
let Switch = ReactRouter.Switch
import './index.css'
class App extends React.Component {
render() {
return (
<Router>
<div className='container'>
<Nav />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/press' component={Press} />
<Route path='/gallery' component={GalleryCarousel} />
<Route path='/contact' component={Contact} />
<Route render={function () {
return <h1 style={{ paddingTop: 80 }}>Page Not Found.</h1>
}} />
</Switch>
<Footer
scrollStepInPx='50'
delay='16.66'
/>
</div>
</Router>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
I was able to work around the issue by using a separate img tag and giving it a src={this.IMAGES} prop. If I don't say this.IMAGES the alt prop is always visible. No amount of CSS would make it go away.
export class GalleryCarousel extends React.Component {
render() {
return (
<div className='home-container'>
<NavLink to='/' style={{marginTop: 80}}>
<img src={brand} alt={'img for brand'} />
</NavLink>
<div>
<img src={this.IMAGES} />
<Gallery images={IMAGES} backdropClosesModal={true} />
</div>
</div>
)
}
}