React Hooks: toggle element on map function

Question

See that loop loading two components. I would like to display only <Image /> by default, but when I click this element, I want it to turn into <YouTube /> (only the one I press, the others are still <Image />). I can do this on a class component, but I want to use a hook

export const MusicVideos = () => {
  const [selectedVideo, setVideo] = useState(0);

  return (
    <Wrapper>
          {videos.map(video => (
<div key={video.id}>
             <Image  src={video.image} hover={video.hover} alt="thumbnail" />
            <YouTube link={video.link} />
</div>
          ))}
   </Wrapper/>
  );
};

videos.map((video, index) => { return (<>{selectedVideo === index ? <image onClick={() => setVideo(index)}/> : <youtube/> </>) } — varjod
– varjod, Commented Jan 16, 2020 at 12:19

Amit Chauhan · Accepted Answer · 2020-01-16 12:22:37Z

1

you can bind onClick for your image and setVideo to video.id and compare with video.id to render image or video.

export const MusicVideos = () => {
  const [selectedVideo, setVideo] = useState(0);

  return (
    <Wrapper>
          {videos.map(video => (
            {selectedVideo !== video.id ?
             <Image onClick={() => setVideo(video.id)  src={video.image} hover={video.hover} alt="thumbnail" /> :
             <YouTube link={video.link} />
          ))}
   </Wrapper/>
  );
};

answered Jan 16, 2020 at 12:22

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jogesh_pi · Accepted Answer · 2020-01-16 12:32:22Z

0

Create a component like this and pass it to the loop;

const YouTubeToggle = (video) => {

    const [selectedVideo, setVideo] = useState(0);

    return (
        <div key={video.id}>
            {selectedVideo == 0 &&
                <Image  src={video.image} onClick={() => setVideo(!selectedVideo)} hover={video.hover} alt="thumbnail" />
            }
            {selectedVideo != 0 &&
                <YouTube link={video.link} />
            }
        </div>
    );
}

export const MusicVideos = () => {
  const [selectedVideo, setVideo] = useState(0);

  return (
    <Wrapper>
          {videos.map(video => (
            <YouTubeToggle video={video} />
          ))}
   </Wrapper/>
  );
};

answered Jan 16, 2020 at 12:32

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

1 Comment

Amit Chauhan Over a year ago

why are you using 0 instead of false?

Collectives™ on Stack Overflow

React Hooks: toggle element on map function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related