How to add image grid list to class? - reactjs

Question

So what I'm trying to do is to add the single line grid list from here:
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/grid-list/SingleLineGridList.js
to the following class:
import React from 'react';
import { withTranslation } from 'react-i18next';
import '../css/home.css';
import Navbar from '../components/Navbar'
import ImgsViewer from 'react-images-viewer'
import image1 from '../resources/examples/1.jpg'
import image2 from '../resources/examples/2.jpg'
import { makeStyles } from '#material-ui/core/styles';
import GridList from '#material-ui/core/GridList';
import GridListTile from '#material-ui/core/GridListTile';
import GridListTileBar from '#material-ui/core/GridListTileBar';
import IconButton from '#material-ui/core/IconButton';
import StarBorderIcon from '#material-ui/icons/StarBorder';
import tileData from './tileData';
class HomeReal extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen : false,
};
}
render(){
const { t } = this.props;
const state = {
isOpen : false,
}
return(
... html code
);
}
}
export default withTranslation()(HomeReal);
I'm really NEW to react so I barely have some understanding.
I already added the neccesary imports.
And now I don't know how to proceed.
I simply want that image list from Material inside my HTML. I've tried several things but I always get compilation errors.
Can you at least give me a hint?

Answer 1

Try this out exactly this will help you
1. create a folder name Assets then copy-paste all your
desired images in that folder
2. then import like this below(see code in import section)
3. then follow the code
4. it worked for me
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import GridList from "#material-ui/core/GridList";
import GridListTile from "#material-ui/core/GridListTile";
import GridListTileBar from "#material-ui/core/GridListTileBar";
import IconButton from "#material-ui/core/IconButton";
import StarBorderIcon from "#material-ui/icons/StarBorder";
import game from "../Assets/game.jpeg";
import ME from "../Assets/ME.JPG";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
},
gridList: {
flexWrap: "nowrap",
// Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
transform: "translateZ(0)",
},
title: {
color: theme.palette.primary.light,
},
titleBar: {
background:
"linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)",
},
}));
const tileData = [
{
img: game,
title: "Image",
author: "author",
},
{
img: ME,
title: "Image",
author: "author",
},
{
img: game,
title: "Image",
author: "author",
},
{
img: game,
title: "Image",
author: "author",
},
];
export default function LeisureTime() {
const classes = useStyles();
return (
<div className={classes.root}>
<GridList className={classes.gridList} cols={2.5}>
{tileData.map((tile) => (
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<IconButton aria-label={`star ${tile.title}`}>
<StarBorderIcon className={classes.title} />
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
</div>
);
}

Answer 2

If your tileData looks like below :
const tileData = [
{
img: image,
title: 'Image',
author: 'author',
},
...
];
This should work :
const useStyles = makeStyles(theme => ({
// make your style
}));
class HomeReal extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen : false,
};
}
const classes = useStyles();
render(){
return(
<div className={classes.root}>
<GridList cellHeight={180} className={classes.gridList}>
<GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
<ListSubheader component="div">December</ListSubheader>
</GridListTile>
{tileData.map(tile => (
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={<span>by: {tile.author}</span>}
actionIcon={
<IconButton aria-label={`info about ${tile.title}`} className={classes.icon}>
<InfoIcon />
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
</div>
);
}
}
If you wanted to use images from
import image1 from '../resources/examples/1.jpg'
import image2 from '../resources/examples/2.jpg'
then replace tile.img with image1