Open popup page on onClick event of component react

Question

I have a component that renders a table.

Each row of the table has a button which is designed to open a detailed page of the row selected.

How can I make react open a popup page on the OnClick event of the button of the given row, passing some parameters?

import React from 'react';

const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link}) => { 

const handleClick = (e)=> {
    console.log(e)
    //how to open pop up page passing parameters?    
    }

    return(
        <tr>
            <td>{indicator_name}</td>
            <td>{indicator_desc}</td>
            <td>{indicator_bench}</td>
            <td>{indicator_approx_date}</td>
            <td>{indicator_avg_field}</td>
            <td> 
                <button
                     onClick={() => handleClick(detail_link)}>
                    {"Detailed Map"}
                </button>
            </td>
        </tr>
    );
}

export default Benchmarks;

Answer 1

Your functional component is invalid. Go through this link.

https://reactjs.org/docs/components-and-props.html

If your already aware of this and know javascript and React's props concept then lift up state

const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link,handleClick, showModal}) => { 

    if(showModal) {
      return <ModalComponent/>
    }
    return(
        <tr>
            <td>{indicator_name}</td>
            <td>{indicator_desc}</td>
            <td>{indicator_bench}</td>
            <td>{indicator_approx_date}</td>
            <td>{indicator_avg_field}</td>
            <td> 
                <button
                     onClick={() => handleClick(detail_link)}>
                </button>
            </td>
        </tr>
    );
}

Inside parentComonent handleClick is function that update showModal state and passit as props now in Benchmarks

https://reactjs.org/tutorial/tutorial.html#lifting-state-up