React.js När jag klickar på en bild är det alltid den som är sist i listan som öppnas
Jag har ett bildgalleri där jag hämtar bilder och text från en mysql databas.
När jag klickar på en bild vill jag att den ska öppnas i en ny komponent. Allt fungerar utom att det är den bild som är sist i listan som alltid öppnas istället för den jag klickar på.
Är ganska ny på react så jag skulle behöva lite hjälp med att peka ut rätt bild.
import React, { Component } from 'react';
import Popup from './Popup';
class Figureskating extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
clicked: false,
};
this.togglePopup = this.togglePopup.bind(this);
}
togglePopup() {
this.setState(state => ({
clicked: true
}));
}
componentDidMount() {
let data = fetch('http://localhost/reusesport/src/api/figureskating.php')
.then((res) => {
res.json().then((res) => {
console.log(res);
this.setState({data:res})
})
})
}
render() {
return (
<div>
<h1 className="Advertisment_title">Konståkning</h1>
<div className="Advertisment">
{
this.state.data ?
this.state.data.map((item) =>
<div className="AdvertismentBox" onClick={this.togglePopup}>
{this.state.clicked ? <Popup id={item.id} title={item.title} text={item.text} date={item.date} price={item.price} municipality={item.municipality} county={item.county}/> : null}
<h3 className="AdvertismentBox_title">{item.title}</h3>
<img src={item.picture} alt={item.title}/>
<h3 className="AdvertismentBox_price">{item.price}</h3>
<h3 className="AdvertismentBox_date">{item.date}</h3>
<h3 className="AdvertismentBox_county">{item.county}</h3>
</div>
)
:
<h3>Vänta - datat hämtas</h3>
}
</div>
</div>
);
}
}
export default Figureskating;