Pick image form React Carousel and push it into a new variable

Question

I have a React Carousel with 4 images for example.

import React from 'react'
import { FacebookShareButton } from "react-share";

import img1 from './images/kitten/200.jpg'
import img2 from './images/kitten/201.jpg'
import img3 from './images/kitten/202.jpg'
import img4 from './images/kitten/203.jpg'

const imageList = [img1, img2, img3, img4]

 class App extends Component {
   constructor(props) {
     super(props)
     this.selected = "";
 }

 render() {
   return (
     <div>
      <Carousel>
         {imageList.map((each) => (
         <img src{each} />
         ))}
      </Carousel>
     </div>
    )
  }
}
export default App;

I would like to pick one image from the slider

And push it in new variable defined above called this.selected

Thanks

Answer 1

By your suggestions, is this what you want?

import React from 'react'
import { FacebookShareButton } from "react-share";

import img1 from './images/kitten/200.jpg'
import img2 from './images/kitten/201.jpg'
import img3 from './images/kitten/202.jpg'
import img4 from './images/kitten/203.jpg'

const imageList = [img1, img2, img3, img4]
class App extends Component {
 constructor(props) {
     super(props)
     this.state = {selected: ""};
 }
 pickFromCarousel(image) {
     this.setState({selected: image});
 }

 render() {
   return (
     <div>
      <Carousel>
         {imageList.map((each) => (
         <img onClick={() => this.pickFromCarousel(each)} src={each} />
         ))}
      </Carousel>
     </div>
    )
  }
}
export default App;

using state.

What I am doing is adding a selected to state in the constructor, and, of course, setting it to null first. We add a function called pickFromCarousel which says to set selected to the image requested. Then, in our render function, we use pickFromCarousel as our function when the image is clicked, by use of an arrow function. The rest of the code is practically the same as yours.