How do I return <Link> component to ag-grid cellRenderer

Question

Product id grid column needs to link to product details page.

I am using ag-grid cellRenderer option to return component which will go to product details page.

cellRenderer: (params) => { return ( {params.value}); } My routing is:

I just need a link in that cell that will direct me to the details page.

I have changed my code so that the cellRenderer returns the following. However, now I get a different error - cellComp.js:895 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. Please help. React.createElement(Link, { to: "/productDetails", certs: { productId: '1234' } }, " 1234 "); — Shinta
And for added assurance, I checked to make sure that element isValidElement — Shinta

Cy I-Am Cy I-Am · Accepted Answer · 2019-09-06T20:02:29

createLink (theId) {
    var hrefVar = "/productDetails";
    const linkElement = React.createElement(NavLink, {
        to: {
                pathname: '/productDetails',
                products: {
                  'productId': theId
                }
            }
        }, theId);

    return linkElement;
}

and then in my render, I have to surround the link with router

<BrowserRouter>
   <div><Route path={"/productDetails"} component={productDetails} />
<span>{this.state.link}</span></div>
</BrowserRouter>

How do I return <Link> component to ag-grid cellRenderer

1 Answers