How can I Add onClick functionality to particular column in React Js?

Question

I have a datagrid in which there is one column named File_link. I want to add functionality to that field such that when user clicks that cell it should open react player and pass that cell value as url to react player. I have already created react player and datagrid.

Example: enter image description here In the image there are two link. When user clicks on any of the link. Reactplayer should get that link as url value and open react player

<ReactPlayer
        ref={playerRef}
        width={"100%"}
        height={"100%"}
        url="xyz" -----> the value of the cell should be passed to this.
        muted={muted}
        playing={playing}
        volume={volume}
        playbackRate={playbackRate}
        onProgress={handleProgress}
      />

//data for table 
const datafortable = this.state.recordingdata1.map((mapvalue,index) => {
return{
id=index+1,
application:mapvalue.applicationname,
File_Link=<a target ="_blank" href={mapvalue.File_Link}></a>,
}
})


//data for column config
ColConfig=[
{
datakey:'id',
label:'id',
width:50,
dataType:'number';
},
{
datakey:'application',
label:'application',
width:50,
dataType:'string';
},
{
datakey:'File_Link',
label:'File_Link',
width:50,
dataType:'string';
}
]

//calling table
<Table 
fundColConfig=ColConfig
data={datafortable}
>

//datagrid in table.js
<DataFGrid
columns={this.props.fundColConfig}
keyFeildName="id"
data={this.state.data}
/>

Answer 1

Maintain a URL in your component's this.state, change it with this.setState(), and when you include the player, write something like:

<ReactPlayer url={ this.state.url } /> 


  onClicked() {
   this.setState({url:event.target.value}
}

     const datafortable = this.state.recordingdata1.map((mapvalue,index) => {
return{
    id=index+1,
    application:mapvalue.applicationname,
    File_Link=<a target ="_blank" href={mapvalue.File_Link} onClick = {this.onClicked}></a>,
}
})