When the user clicks the tableCell text below, he should be navigated to http://localhost:3000/crayons/${rows.id} <- This exists in my react-router-dom

I am not sure how to edit the below code to do the following

<TableBody>

{props.rows.slice(page).map(row => (
     <TableCell align="center">{row.crayon_color}</TableCell>

</TableBody>

What I tried

<TableCell align="center" numeric ponent="a" href=`http://localhost:3000/crayons/${rows.id}`> {row.crayon_color}</TableCell>

When the user clicks the tableCell text below, he should be navigated to http://localhost:3000/crayons/${rows.id} <- This exists in my react-router-dom

I am not sure how to edit the below code to do the following

<TableBody>

{props.rows.slice(page).map(row => (
     <TableCell align="center">{row.crayon_color}</TableCell>

</TableBody>

What I tried

<TableCell align="center" numeric ponent="a" href=`http://localhost:3000/crayons/${rows.id}`> {row.crayon_color}</TableCell>

• javascript
• reactjs

• 1 Are you using any sort of router? Is /crayons a part of your app? Look into react-router-dom You can find the GitHub repo here – Matt Oestreich Commented Aug 31, 2019 at 17:41
• @MattOestreich yes it is part of my react-router-dom – Joseph Adam Commented Aug 31, 2019 at 17:42

3 Answers 3

Try using a callback for the table cell that pushes the routes into history, so with that your code would resemble something like this:

import React from 'react';
import {withRouter} from 'react-router-dom';

const ExampleComponent = (props) => {

  // ...other ponent variables

  callback = () => {
    props.history.push(`crayons/${rows.id}`)
  }

  return (
    <TableCell align="center" onClick={callback}>{row.crayon_color}</TableCell>
  );
}

export default withRouter(ExampleComponent);

EDIT updated live demo to show how to handle dynamic objects in an array.

EDIT 2 updated live demo and the code below to reflect how to use URL params with dynamic objects..

I believe the easiest way to acplish this is by using a <Link/> ponent from react-router-dom.

Live Demo Found Here

This is what the BrowserRouter needs to look like:

    <Switch>
      <Route exact path="/" ponent={Home} />
      <Route exact path="/crayons" ponent={Crayons} />
      <Route path="/crayons/:id" ponent={Crayons} />

      {/* MUST BE THE LAST ROUTE IN THIS LIST!!!! */}
      <Route ponent={FourZeroFour} />
    </Switch>

Then inside of your Crayons.js page, you can access the URL param, in this case id like: props.match.params.id..

Demo Table code:

// Build 'fake data' for table
const rows = Array.from(Array(10).keys()).map(item => {
  return {
    data: "Crayon",
    count: Math.floor(Math.random() * 100),
    id: item + 1
  }
})

export default function Home() {
  const classes = useStyles();

  return (
    <>
      <h1>Wele to my app</h1>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Data</TableCell>
              <TableCell>ID</TableCell>
              <TableCell>Count</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map(row => {
              return (
                <TableRow key={row.id}>
                  <TableCell ponent="th" scope="row">
                    {row.id
                      ? <Link to={`/crayons/${row.id}`}>{row.data}</Link>
                      : row.data}
                  </TableCell>
                  <TableCell>
                    {row.id}
                  </TableCell>
                  <TableCell>
                    {row.count}
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </Paper>
    </>
  )
}

You can use library React Router Dom.

Solution is simple add withRouter HOC to your ponent.

import { withRouter } from 'react-router-don'


const Component = () => (
    <TableCell align="centre" onClick={()=>props.history.push(`${rows.id}`)}>{row.crayon_color}</TableCell>
)

export default withRouter(Component);