React-Bootstrap modal only take last item of map - reactjs

Question

I'm a beginner in coding. I'm creating my graphic designer portfolio. I've put all the portfolio content (thumbnail, client name, description...) into an array called "portfolio" in a JSON file. Each item the array is a different project.
I display a galery of thumbnails, and when I click on a thumbnail, a modal opens with the project details.
I map on my "portfolio" array to display the galery, that works. But when I open the modal, it always display the last item of my array.
import React from 'react';
import Modal from 'react-bootstrap/Modal';
class Portfolio extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
error: null,
isLoaded: false,
items: [],
projectName: "",
show: false
};
this.handleShow = () => {
this.setState({ show: true });
};
this.handleClose = () => {
this.setState({ show: false });
};
}
componentDidMount() {
fetch("https://api.myjson.com/bins/1cbaj5")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.portfolio
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const {error, isLoaded, items} = this.state;
if (error) {
return <div>Erreur : {error.message}</div>;
} else if (!isLoaded) {
return <div>Chargement…</div>;
} else {
return (
<div id="portfolio">
<h2>Portfolio</h2>
<ul className="portfolio-list">
{items.map(item => (
<li key={item.client}>
<div className="vignette">
<button onClick={() => this.handleShow()}>
<h4>{item.client}</h4>
<div className="filtre"></div>
<img src={item.vignette} alt={item.titre} />
</button>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<h3>{item.client}</h3>
</Modal.Header>
<Modal.Body>
<p>{item.description}</p>
</Modal.Body>
</Modal>
</div>
</li>
))}
</ul>
</div>
);
}
}
}
export default Portfolio;
I would like the modal to display the corresponding project details.
Thank you for your help.

Answer 1

You need to have only 1 modal and pass data dynamically on item click,
<ul className="portfolio-list">
{items.map(item => (
<li key={item.client}>
<div className="vignette">
<button onClick={()=> this.handleShow(item)}> //Pass complete item object here
<h4>{item.client}</h4>
<div className="filtre"></div>
<img src={item.vignette} alt={item.titre} />
</button>
</div>
</li>
))}
<Modal show={this.state.show} onHide={this.handleClose}> //Only one modal
<Modal.Header closeButton>
<h3>{this.state.activeItem.client}</h3>
</Modal.Header>
<Modal.Body>
<p>{this.state.activeItem.description}</p>
</Modal.Body>
</Modal>
</ul>
Now in your handleShow function you can set item to state,
this.handleShow = (item) => {
this.setState({activeItem:item}, ()=> this.setState({ show: true }));
};
Use callback to show modal, which makes sure activeItem have latest clicked item.
Initial state,
this.state = {
error: null,
isLoaded: false,
items: [],
projectName: "",
show: false,
activeItem:'' //new added
};

Answer 2

The previous answer is great. In functional components it is possible to create a function for handling both states and it works perfectly.
export const TeamCollection = () => {
const [modalShow, setModalShow] = useState(false);
const [name, setName] = useState("");
const handleName = (name) => {
setName(name);
setModalShow(true);
};
return (
<Container>
<Row>
{team_data.map((item) => (
<Col key={item.id}>
<div style={{ width: "175px" }}>
<ImageContainer>
<LinkContainer onClick={() => handleName(item.name)}>
<BackgroundImage
style={{ backgroundImage: `url(${item.imageUrl})` }}
/>
</LinkContainer>
</ImageContainer>
<h4>{item.name}</h4>
<p>{item.position}</p>
</div>
</Col>
))}
</Row>
<RouteModal
data={name}
show={modalShow}
onHide={() => setModalShow(false)}
/>
</Container>
);
};
export default TeamCollection;