How to hide/show a specific part in a map function in React?

Question

I have a page that lists songs. Each song has some info and a video(song.link). I want to have a button for each song to hide/show each video. By adding "false?" at the front of "ReactPlayer" component and ":null" to end of it I can hide it. But I don't know how to make it through a button with a variable.

import React,{Component,useState} from 'react';
import ReactPlayer from "react-player";
import './bootstrap.min.css';

export class Song extends Component{

    constructor(props){
        super(props);
        this.state={songs:[]};
    }

    refreshList(){
        fetch(process.env.REACT_APP_API+"song")
        .then(response=>response.json()) 
        .then(data=>{
            this.setState({songs:data});
        });
    }

    componentDidMount(){
        this.refreshList();
    }

    componentDidUpdate(){
        
    }

    render(){
        const {songs}=this.state;
        
        return(
            <div className="container col-20">
                    <tbody>
                        {songs.map(song=>(
                            <tr key={song.id}>
                            <div className="row turn">
                                <div className="jumbotron col-4">
                                <tr>{song.name}</tr>   
                                <tr>{song.lyricsby}</tr>
                                <tr>{song.musicby}</tr>
                                <tr>{song.lyrics}</tr>
                                <tr>{song.albumName}</tr>
                                <button>Hide/Show Video</button> 
                                </div>
                                <div className="jumbotron col-8">
                                    <div className="mt-0 d-flex justify-content-right">
                                    {
                                    false?
                                    <ReactPlayer
                                        url={song.link}
                                    />:null}
                                    </div>
                                </div>
                            </div>
                            </tr>
                        ))}
                    </tbody>
            </div>
        )
    }
}

Answer 1

You will need to bind the "false" which controls the render of ReactPlayer and add setState to the button onClick which toggles the boolean value