React Js : Redirect to another page on button click with table row data

Question

I am trying to redirect from Page 'SalesList.jsx' to 'SalesInvoice.jsx' by clicking a button, but failed to do so. I am getting all the props on button click but unable to call the later page.

I am sharing my code for better understanding:

calling onSalesView function on button click by passing row value as props

<Table.Row key={id}>
  <Table.Cell>{row.id}</Table.Cell>
  <Table.Cell>{row.ServiceNo}</Table.Cell>
  <Table.Cell>{row.ServiceName}</Table.Cell>
  <Table.Cell>{row.Cost}</Table.Cell>
  <Table.Cell>
    <Dropdown icon='ellipsis vertical' floating direction="left" className='icon'>
      <Dropdown.Menu>
        <Dropdown.Item onClick={()=> onSalesView(row) }>Sales Invoice</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Table.Cell>    
</Table.Row>

Trying to redirect to the new page with table values. Table values are coming properly, But couldn't accomplish the redirection part.

const onSalesView = (data) => {
   return <SalesInvoice data={data} />  
}

Does this answer your question? What is the best way to redirect a page using React Router? — enzo
– enzo, Commented Jan 9, 2022 at 21:02

Ramil Aliyev 007 · Accepted Answer · 2022-01-10 05:58:55Z

1

What you did is returning jsx component that will show in the Dom ... and not redirect to other component

You can use history API ... and also you can pass data to the other component like this

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

========================= Get Sent Params ===========================
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

import { useHistory } from 'react-router-dom';

const YourComponent = () => {
...
const history = useHistory();
return {
    ...
    rows.map((row) => (
        <TableRow key={row.id} onClick={() => history.push(yourLocation)}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}
}

edited Jan 10, 2022 at 5:58

Ramil Aliyev 007

5,6102 gold badges38 silver badges59 bronze badges

answered Jan 9, 2022 at 21:22

Ahmed fouad

1091 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BaseAlpha Over a year ago

Can i pass the row parameters into history.push?

Ahmed fouad Over a year ago

Yes you can, I edited the answer above

Collectives™ on Stack Overflow

React Js : Redirect to another page on button click with table row data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related