I'm encountering an issue in my react project where the pictures I fetch from a JSON file don't open in full screen when clicked individually. Instead, they all open at once. As a newcomer to React, I suspect that my current approach might be incorrect. Here is the code snippet:
import React from "react";
import axios from "axios";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import "../App.scss";
export default class Portfolio extends React.Component {
state = {
persons: [],
};
handleShowDialog = () => {
this.setState({ isOpen: !this.state.isOpen });
console.log("cliked");
};
componentDidMount() {
axios.get("http://localhost:3000/persons.json").then((res) => {
const persons = res.data;
this.setState({ persons });
});
}
render() {
return (
<div className="container">
<div className="row justify-content-center">
{this.state.persons.map((person) => (
<Card key={person.id} className="col-3 axios-items">
<CardActionArea>
<CardMedia
component="img"
alt={person.alt}
height="140"
image={person.src}
title={person.title}
onClick={this.handleShowDialog}
/>
{this.state.isOpen && (
<dialog
className="dialog"
style={{ position: "absolute" }}
open
onClick={this.handleShowDialog}
>
<img
className="image"
src={person.src}
onClick={this.handleShowDialog}
alt="no image"
/>
</dialog>
)}
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{person.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{person.desc}
</Typography>
</CardContent>
</CardActionArea>
</Card>
))}
</div>
</div>
);
}
}