Problems passing a dynamic link to the table

Question

I'm using react-bootstrap-table here, but every other option is a good deal. I have a big problem inserting a Link to the table. I tried almost everything. I got data coming from a server, so I'm mapping over it and rendering the results. But I need to be able to click on one of them and take that clicked value and passes it onto the second component. I'm able to do do that without using react-bootstrap-tables, but I like them so much, so I was wondering if that's a possibility and if so, can you please help me. Here's an important piece of code.

sortedReports is an array.

let test = sortedReports.map(item => {
        return (<Link to={{ pathname: '/reports/details', state: { item } }}>
                    <PieChart size="21"/>
                </Link>
                )
        });

return (
        <div className="container">
        <div>
        <header style={{textAlign: 'center'}}>
            <h4>The complete list of reports</h4>
            <p style= {{ color: '#48C6EF' }}>Details available by clicking on an icon </p>
            </header>
            <hr />
        </div>

<div className="col-md-10">
        <BootstrapTable
          data={ sortedReports }
          pagination>
          <TableHeaderColumn dataField='year'>Year</TableHeaderColumn>
          <TableHeaderColumn dataFormat = { this.colFormatter} dataField='month'>Month</TableHeaderColumn>
          <TableHeaderColumn dataField='ukupno_plata'>Full salary</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_ukupno' isKey={true}>Full gross</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_plata'>Bruto</TableHeaderColumn>
          <TableHeaderColumn dataField='neto_plata'>Neto</TableHeaderColumn>          
          <TableHeaderColumn dataField='topli_obrok'>Neto</TableHeaderColumn>                    
          <TableHeaderColumn dataField='doprinosi'>Taxes</TableHeaderColumn> 
          <TableHeaderColumn **dataField={test}**>Details</TableHeaderColumn>

Answer 1

The solution was easy and pretty straightforward now, but at that time it gave me headaches :)

What I did is, I used a library called react-feather to display icons, wrapped a <Link /> tag around it, and passed in the relevant data to pass it to the next component. And in the next component I accessed it like this: const { data} = this.props.history.location.state;

const {yearsData, monthsData, netData, grossData, mealsData, taxData, handSalaryData, employeeNum} = this.state.currentSession;

    // Preparing the data for rendering
    const dataTable = yearsData
        .map((item, idx) => {
            let yearX = item;
            let monthX = monthsData[idx];
            let dev = {};
            data.relMonth = monthX;
            data.relYear = yearX;
            return (
                <tr key={yearX + monthX}>
                    <td>{item}</td>
                    <td>{monthsData[idx]}</td>
                    <td>{netData[idx]}</td>
                    <td>{grossData[idx]}</td>
                    <td>{mealsData[idx]}</td>
                    <td>{taxData[idx]}</td>
                    <td>{handSalaryData[idx]}</td>
                    <td>{employeeNum[idx]}</td>

                   // Here is where the 'magic' happens

                    <td className="table-actions">
                        <Link to={{ pathname: `/reports/details`, state: { data } }}>
                            <Activity size="20"/>
                        </Link>
                    </td>
                </tr>
            )});