score:1

Accepted answer

No need to use the click handler of the button. You cannot get row data with that.

Add a colId to column definition for actions. Then handle the onCellClicked action of the grid. You can get the row data using params.node.data.

const [videoName, setVideoName] = useState("");

function onCellClicked(params) {
    // maps to colId: "action" in columnDefs,
    if (params.column.colId === "action") {
      // set videoName for the row
      setVideoName(params.node.data.Video_Name);
      setOpen(true);
    }
}

// grid config
<AgGridReact
  ...
  rowData={response}
  onCellClicked={onCellClicked}>
</AgGridReact>

// access videoName in dialog content
<DialogContent>
 {/* <iframe width="420" height="315" title="videos" src={id} /> */}
 <div>{videoName}</div>
</DialogContent>

Edit reverent-zhukovsky-gt4mln

Output - Click on any row's play button. Result is that rows video url. You can now use this to play the actual video.

Output

score:1

If I correctly understood the question, it is because in DialogContent you are mapping through all response, and showing all of them. Instead why not here:

const actionButton = (params) => {
    setOpen(true);
  };

instead of storing true, store id (it seems video name could work in your case too) of the row clicked. Then inside DialogContent render only one iframe, with video based on that id.

PS. You can pass !!id as open prop to Dialog, which means if there is something in id, the Dialog will open (assuming there are no ids with falsy values).

Or you can actually store the whole row itself in state, and then you can more easily access it, here is simple example what I mean:

let data = [
  { name: 'david', id: 0 },
  { name: 'nick', id: 1 },
  { name: 'john', id: 2 },
];

export default function App() {
  let [clicked, setClicked] = React.useState(null);
  return (
    <div>
      {data.map((x) => {
        return (
          <div
            key={x.id}
            onClick={() => {
              setClicked(x);
            }}
          >
            Row {x.name}
          </div>
        );
      })}
      <div>Clicked row {clicked && clicked.name}</div>
    </div>
  );
}

Related Query

More Query from same tag