How to navigate between Components in react from button under react-bootstrap-table 2 column

Question

I am using React Bootstrap table 2 for displaying data from external API. As part of my table i have included a dummy column which stores a button for every row when clicked should navigate to a different component with some row information.

The column definition in my code:

{
    dataField: 'expand',
    text: 'EXPAND',
    isDummyField:true,
    editable: false,
    formatter: (cell, row, rowIndex, formatExtraData) =>
    {
        return ( 
            <button
               type="button" 
               onClick = {() => <ExtendedView data={row} /> }
            >
                <img src = {expand} alt="expand"></img>
            </button>
         );
    },
    headerStyle: () => 
    {
        return { width: '50px', textAlign: 'center' };
    }
 }

The Component to which button click should redirect:

import React from 'react';

class ExtendedView extends React.Component
{
    constructor(props)
    {
        super(props)
        this.state = 
        {
            Id:0
        }
    }

    render()
    {

        console.log(this.props.data)
        console.log(this.state.Id)
        return(
            <div>
                <h1>{this.props.data}</h1>
            </div>
        );
    }

}

export default ExtendedView;

I am not getting any error neither am able to navigate to child component. Also nothing is getting printed as part of two console.log() command I am not sure what's actually going on with react or i have missed something.

This maybe a very simple catch but being a newbie in react i am not able to debug.

Please help.

Thanks...

Answer 1

The issue is in the code onClick = {() => <ExtendedView data={row} /> }

If what you want is to change the view to the ExtendedView then you must use a library to control different views, becouse React is designed to create SPA. In this cases I use the library react-router (https://reacttraining.com/react-router/web/example/basic). Is easy to use and can help you with this problem

Answer 2

I solved it using the concept of pop up. Make a component and toggle it's display on basis of event trigger