How Do I update the artist and title name dynamically

[Jagmohan Singh]

const defaultOptions = {
id: 'AudioPlayer',
keyEnabled: true,
globalVolume: true,
media: {
title: 'Live',
artist: "Ariana Grande",
sources: {
mp3: 'http://s2.mp3.com:3221/;',
},

},

};
initializeOptions(defaultOptions);

export class AudioPlayer extends React.Component{

constructor(props) {
    super(props);
    this.state = {
        artistName: {}
        }
    }
}
componentDidMount(){
    axios.get(`${url}currentShow`)
        .then((res) => {
            let currentShow = res.data;

            this.setState({
               artistName: currentShow[0].artist_name });

          this.dispatch(actions.setMedia('AudioPlayer', 'artist',this.state.artistName));
      
        }).catch((err) => {
        console.log(err)
    })

}


render(){


    return(
<div id="top-player">

<JPlayer id={defaultOptions.id} >
    <div id="jquery_jplayer_1" className="jp-jplayer">

    <Audio />

    </div>
    <div className="jp-gui jp-interface" >
        <div className="jp-details">
            <div className="jp-title-container">
                <Poster/>
                <Title/>
            </div>
        </div>
        <div className="jp-controls">
            <div className="jp-play-wrap">

                <Play className="prusa-play">
                <div className="jp-play-front"></div>
                    <div className="jp-play-back"></div></Play>
            </div>

        </div>

            <div className="jp-volume-controls">
                <Mute>

                </Mute>
                <div className="jp-volume-slider">
                    <div className="jp-volume-bar-value">
                        <VolumeBar />
                    </div>
                </div>
            </div>



        <BrowserUnsupported />
    </div>
</JPlayer>
</div>

);

}
}
export default connect(AudioPlayer);

[Jagmohan Singh]

I got it working