React.js När jag klickar på en bild är det alltid den som är sist i listan som öppnas

Permalänk

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;

Permalänk
99:e percentilen

Tänk på att lägga kod i [code]-taggar så att det går att läsa den här på forumet. Exempel:

[code]
console.log("Hello World!");
[/code]

Better SweClockers låter dig göra det med ett enkelt knapptryck, och mycket annat.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

Tag sen jag pillade på react men jag skulle tro att när du klickar på en bild så öppnar du alla popups och då dom antagligen ligger ovanpå varandra så ser du bara den sista.
Du måste ange vilken popup som ska visas mha id eller något.
Ett smidigt sätt hade varit att helt enkelt skicka in item i popup vid click, typ onclick=popup(item) och sen låta popup komponenten ta hand om resten

Skickades från m.sweclockers.com

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Permalänk
Medlem

Dvs this.state.clicked blir ju true för alla Advertisment när du klickar på en

Skickades från m.sweclockers.com

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Permalänk
Medlem

Som @kundun säger så öppnar du alla dina popups när du klickar på en av dem.

Om jag vore du så skulle jag skriva en funktion i Popup-komponenten som lyssnar efter ett klick på just den komponenten. Popup bör då ha ett eget state för open/closed (exempelvis).

Du har rätt tänk, men skicka ner toggle-logiken till varje child-komponent istället

EDIT: Såg nu att jag gav exakt samma svar som kundun skrev innan, ber om ursäkt för det haha!

Permalänk

@Bigfudge:
Tack för ditt svar!

Låter väldigt bra men nu märker jag att mina programmeringskunskaper är lite bristfälliga.
Hur gör jag för att kontrollera vilken bild man klickat på?

Kan jag i en funktion gå till en annan komponent med eller funkar det bara från HTML-koden.

Permalänk
Medlem

@Snillet71

Nä det räcker inte med bara HTML-koden.

Tänk att du ska använda "clicked"-logiken du har just nu, fast flytta den till din "Popup"-komponent. Så i Popup-komponenten ger du den ett state (förslagsvis this.state.open === true/false), sen en funktion i Popupkomponenten som lyssnar efter ett klick kör "togglePopup"-funktionen.
Funktionen sätter du i en onClick={this.togglePopup} på Popup-komponenten.

Du loopar redan över varje "Popup", så när du renderar ut varje komponent så kommer alla ha varsin togglefunktion på sig - på så sätt behöver du inte oroa dig att hålla rätt på vilken som ska öppnas, de lyssnar själva efter ett event.

Hoppas min förklaring iallafall ger dig lite klarhet, är ganska ovan att hjälpa andra....

Permalänk

@Bigfudge: Tack, för hjälpen.
Har inte löst det än men kommit en bit på väg :).

Permalänk
Medlem

Vill du göra en quick and dirty lösning med minimal förändring så kan du göra såbhär:
Istället för att clicked är en boolean så lagrar du id på den popup som ska visas. Gör såhär:
I constructorn: sätt clicked till null
Låt togglePopup metoden ha en parameter; id
och i den metoden sätter du clicked till id
I diven sätter du onclick till this.togglePopup(item.id)
Och i villkoret nedanför: this.state.clicked === item.id ?

Så ska det funka

Skickades från m.sweclockers.com

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Permalänk

@kundun: Tack då jättemycket, nu fungerar det!
Det var precis så jag hade börjat min egen lösning.

Den får fungera så länge, så ger jag mig på en snyggare lösning längre fram.