Styjun

I am working on a custom react project and I have a problem that a wrong array of images is showing when a component should be rerendered, I am not sure what the real issue is but I think I might be missing a rerendering somewhere, i will try to explain as best as i can below please seek more info if you need it, also try to bear with me there's a link at the end :)

NOTE: gallery component is where you choose the gallery and ContainerPhotography is the one where image arrays that don't work are shown

this is the JSON object that i am using in state

 fotografije: [
 
 "naslov": "Sculptures",
 "id": "f00",
 "brSlika": "10 image Gallery",
 "naslovnaSlika": "http://lanapavkov.com/content/img1.png",
 "naslovKlasa": "sculptures_naslov",
 "slikeUGaleriji": ["http://lanapavkov.com/content/skulpture/skp0.jpg", "http://lanapavkov.com/content/skulpture/skp1.jpg", "http://lanapavkov.com/content/skulpture/skp2.jpg", "http://lanapavkov.com/content/skulpture/skp3.jpg", "http://lanapavkov.com/content/skulpture/skp4.jpg", "http://lanapavkov.com/content/skulpture/skp5.jpg", "http://lanapavkov.com/content/skulpture/skp6.jpg", "http://lanapavkov.com/content/skulpture/skp7.jpg", "http://lanapavkov.com/content/skulpture/skp8.jpg", "http://lanapavkov.com/content/skulpture/skp9.jpg"],
 "slikaKlasa": "sculptures"
 , 
 "naslov": "Captions",
 "id": "f01",
 "brSlika": "16 image Gallery",
 "naslovnaSlika": "http://lanapavkov.com/content/una_gallery.png",
 "naslovKlasa": "captions_naslov",
 "slikeUGaleriji": ["http://lanapavkov.com/content/captions/cpt1.jpg", "http://lanapavkov.com/content/captions/cpt2.jpg","http://lanapavkov.com/content/captions/cpt3.jpg", "http://lanapavkov.com/content/captions/cpt4.jpg", "http://lanapavkov.com/content/captions/cpt5.jpg", "http://lanapavkov.com/content/captions/cpt6.jpg", "http://lanapavkov.com/content/captions/cpt7.jpg", "http://lanapavkov.com/content/captions/cpt8.jpg", "http://lanapavkov.com/content/captions/cpt9.jpg", "http://lanapavkov.com/content/captions/cpt10.jpg", "http://lanapavkov.com/content/captions/cpt11.jpg", "http://lanapavkov.com/content/captions/cpt12.jpg", "http://lanapavkov.com/content/captions/cpt13.jpg", "http://lanapavkov.com/content/captions/cpt14.jpg", "http://lanapavkov.com/content/captions/cpt15.jpg", "http://lanapavkov.com/content/captions/cpt16.jpg",],
 "slikaKlasa": "captions"
 , 
 "naslov": "Eva",
 "id": "f02",
 "brSlika": "9 image Gallery",
 "naslovnaSlika": "http://lanapavkov.com/content/Eva_prez.png",
 "naslovKlasa": "eva_naslov",
 "slikeUGaleriji": ["http://lanapavkov.com/content/eva/1.jpg", "http://lanapavkov.com/content/eva/2.jpg", "http://lanapavkov.com/content/eva/3.jpg", "http://lanapavkov.com/content/eva/4.jpg", "http://lanapavkov.com/content/eva/4(1).jpg", "http://lanapavkov.com/content/eva/5.jpg", "http://lanapavkov.com/content/eva/6.jpg", "http://lanapavkov.com/content/eva/7.jpg", "http://lanapavkov.com/content/eva/8.jpg", "http://lanapavkov.com/content/eva/10.jpg", "http://lanapavkov.com/content/eva/11.jpg", "http://lanapavkov.com/content/eva/12.jpg", "http://lanapavkov.com/content/eva/13.jpg", "http://lanapavkov.com/content/eva/14.jpg", "http://lanapavkov.com/content/eva/15.jpg", "http://lanapavkov.com/content/eva/16.jpg", "http://lanapavkov.com/content/eva/17.jpg", "http://lanapavkov.com/content/eva/18.jpg", "http://lanapavkov.com/content/eva/19.jpg", "http://lanapavkov.com/content/eva/20.jpg", "http://lanapavkov.com/content/eva/21.jpg", "http://lanapavkov.com/content/eva/22.jpg", "http://lanapavkov.com/content/eva/23.jpg", "http://lanapavkov.com/content/eva/24.jpg"],
 "slikaKlasa": "eva"
 , 
 "naslov": "Exposures",
 "id": "f03",
 "brSlika": "19 image Gallery",
 "naslovnaSlika": "http://lanapavkov.com/content/street_gallery_1.png",
 "naslovKlasa": "exposures_naslov",
 "slikeUGaleriji": ["http://lanapavkov.com/content/exposures/exp1.JPG", "http://lanapavkov.com/content/exposures/exp2.JPG", "http://lanapavkov.com/content/exposures/exp3.JPG", "http://lanapavkov.com/content/exposures/exp4.JPG", "http://lanapavkov.com/content/exposures/exp5.JPG", "http://lanapavkov.com/content/exposures/exp6.JPG", "http://lanapavkov.com/content/exposures/exp7.JPG", "http://lanapavkov.com/content/exposures/exp8.JPG", "http://lanapavkov.com/content/exposures/exp9.JPG", "http://lanapavkov.com/content/exposures/exp10.JPG", "http://lanapavkov.com/content/exposures/exp11.JPG", "http://lanapavkov.com/content/exposures/exp12.JPG", "http://lanapavkov.com/content/exposures/exp13.JPG", "http://lanapavkov.com/content/exposures/exp14.JPG", "http://lanapavkov.com/content/exposures/exp15.JPG", "http://lanapavkov.com/content/exposures/exp16.JPG", "http://lanapavkov.com/content/exposures/exp17.JPG", "http://lanapavkov.com/content/exposures/exp18.JPG", "http://lanapavkov.com/content/exposures/exp19.JPG", "http://lanapavkov.com/content/exposures/exp20.JPG", "http://lanapavkov.com/content/exposures/exp21.JPG", "http://lanapavkov.com/content/exposures/exp22.JPG", "http://lanapavkov.com/content/exposures/exp23.JPG", "http://lanapavkov.com/content/exposures/exp24.JPG", "http://lanapavkov.com/content/exposures/exp25.JPG", "http://lanapavkov.com/content/exposures/exp26.JPG", "http://lanapavkov.com/content/exposures/exp27.JPG", "http://lanapavkov.com/content/exposures/exp28.JPG", "http://lanapavkov.com/content/exposures/exp29.JPG", "http://lanapavkov.com/content/exposures/exp30.JPG"],
 "slikaKlasa": "exposures"
 
]

in my app.js I loop through this array to get four images on the screen that are actually buttons to trigger a gallery component

 <div className="photography_c">
 this.state.fotografije.map((photography, index) => 
 return <Gallery
 naslov=photography.naslov
 naslovnaSlika=photography.naslovnaSlika
 naslovKlasa=photography.naslovKlasa
 brSlika=photography.brSlika
 key=photography.id
 slikaKlasa=photography.slikaKlasa
 openPhotography=() => this.injectPhotography(index) />
 )
 </div>

the actual gallery component looks like this

 const Gallery = (props) => 
 return (
 <div onClick=props.openPhotography className="singleGallery">
 <div className=props.naslovKlasa>
 <h3>props.naslov</h3>
 <p>props.brSlika</p>
 <img className="plus_icon" src="http://lanapavkov.com/content/more.png" alt="open" />
 </div>
 <img className=props.slikaKlasa src=props.naslovnaSlika alt="nova slika "/>
 </div>
 )

the openPhotography I use to import one of the clicked objects into an empty state and use its info to fill out another component that is the actual selected gallery. the function looks like this

 injectPhotography = (fotografijaIndex) => 
 let brslikeuG = this.state;
 brslikeuG = 1;
 this.setState(brslikeuG: brslikeuG);

 const updownPhotography = this.state;
 updownPhotography.push("position-top-photography");
 this.setState(updownPhotography: updownPhotography);
 const selectedPhotography = this.state.fotografije.find((fotografija, index) => index === fotografijaIndex)
 this.setState((prevState) => (
 selectedPhotography
 ))
 

*brslikeuG is a number I print out on the page so the user knows how many images there are

the actual component with the sldes and images is this component

 const ContainerPhotography = (props) => 
return (
 <div className=props.klasa.join(' ')>
 <div className="arrow_holder">
 <p className="br_slike">props.brSlike/props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.length</p>
 <img onClick=props.klikLevo src="http://lanapavkov.com/content/back_arrow.png" alt="right_arrow" />
 <img onClick=props.klikDesno src="http://lanapavkov.com/content/back_arrow.png" alt="left_arrow" />
 </div>
 <div className="horizontal_container" style= left: props.left >
 props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.map((slika, index)=> 
 return <ImageLoopPhoto Key='Key-'+index url=slika />
 )
 </div>
 <img onClick=props.zatvori src="http://lanapavkov.com/content/close.png" alt="close" className="close-popup" />
 </div>
 )

and it is called from the app.js

<ContainerPhotography
 selectedPhotography=this.state.selectedPhotography
 klasa=this.state.updownPhotography
 zatvori=this.closePreviewPhotography
 left=this.state.left
 brSlike=this.state.brslikeuG
 klikDesno=this.pomeranjeGalerijePhotoDesno
 klikLevo=this.pomeranjeGalerijePhotoLevo/>

and the last component that prints images in a loop is this one

const ImageLoopPhoto = (props) => 
 return (
 <div className="horizontal_element">
 <img src=props.url alt="alt"/>
 </div>
 )

when I close the actual slide component just the css classes are changed so I won't bother you with that.

THE PROBLEM: when you click on the first image, go through the gallery, close it and open the second gallery the images from the first gallery are still there and when you try to click the arrows the images change to the second array (sometimes they don't). I am not sure if this is a rerendering issue or just a bad practice of everything. I'm just starting out with react so please have patience and all advice is welcome

also you can see this live on lanapavkov.com if you go to photography on top and click around you can see the issue.

Can you please replace component ContainerPhotography with below codes. notice that i changed the props Key to key. lowercase k. and use url as key.

 const ContainerPhotography = (props) => 
return (
 <div className=props.klasa.join(' ')>
 <div className="arrow_holder">
 <p className="br_slike">props.brSlike/props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.length</p>
 <img onClick=props.klikLevo src="http://lanapavkov.com/content/back_arrow.png" alt="right_arrow" />
 <img onClick=props.klikDesno src="http://lanapavkov.com/content/back_arrow.png" alt="left_arrow" />
 </div>
 <div className="horizontal_container" style= left: props.left >
 props.selectedPhotography && props.selectedPhotography.slikeUGaleriji && props.selectedPhotography.slikeUGaleriji.map((slika, index)=> 
 return <ImageLoopPhoto key=slika url=slika />
 )
 </div>
 <img onClick=props.zatvori src="http://lanapavkov.com/content/close.png" alt="close" className="close-popup" />
 </div>
 )

let me know, if this fix your issues.
Thanks