How to pass table row data as props to another page using onClick event in React Js

Question

I'm new to React Js and developing a delivery portal that needs to send table data onclickevent to another page. I'm still new to props and react REDUX and have no idea how to implement this. There are 3 pages basically. 1.Home.js 2.Pending.js 3.Confirmed.js

we use Spring boot for back end and mongoDB as database and Pending.js file retrieve data from database.What I want to do is pass table records to confirmed.js page user click on send to RTS button. I'm clueless on how to do that.

Pending.js

import React, { Component, useEffect, useState } from "react";
import axios from 'axios';
import NavBar from '../components/NavBar';


//import Orders from "../components/Orders";



function Pending(){

const [posts,setPosts]=useState([]);
const [deliveryAgent, setDeliveryAgent] = useState();

useEffect(()=>{
  axios.get("http://localhost:8080/list")
  .then(res => {
    console.log(res)
    setPosts(res.data)
})
.catch(err=>{
  console.log(err)
})
},[])

   return (
      <div>
          <div>
            <NavBar/>
         
        </div>
       
            <div>
            <h3 className="text-left" style={{padding: "20px 0px"}}>Pending Orders</h3>
          <table className="table table-striped">
            <thead class="table-light">
                    <tr>
                        
                       <td>Order Id</td>
                        <td>Customer Id</td>
                        <td>Address</td>
                        <td>Delivery Agent</td>
                        <td>Confirm Order</td>

                        
                       

                    </tr>
                </thead>
                <tbody>
               {
                 posts.map
                    (post=>(
                    <tr key={post.id}>
                    <td>{post.id}</td>
                    <td>{post.sellerId}</td>
                    <td>{post.address}</td>
                    <td> 
                    
      
 
  <div class="dropdown">

  <select class="form-select form-select-sm mb-1" aria-label=".form-select-lg example">
  <option selected><strong> Delivery Agent</strong> </option>
  <option value="1">Agent A</option>
  <option value="2">Agent B</option>
  <option value="3">Agent C</option>
</select>
    
 
</div>
</td>



 <td><a href="/confirmed" class="btn btn-secondary btn-sm" role="button">Send to RTS</a> 
 </td>
 </tr>
  ))

          }
          </tbody>
          </table>
                      
        </div>
        </div>

      )
    }
    export default Pending;

Aman Sadhwani · Accepted Answer · 2022-06-10 09:02:43Z

2

You can use send data using routes please make sure you use react-router-dom version ^6.2.2

I have already implemented such scenario you can also refer my repo here https://github.com/amansadhwani/auto-logout-react/tree/main/src

import react-router-dom in your Pending component see below

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

Initialize useNavigate

const navigate = useNavigate();

You should never use anchor tag (a) in reactjs instead use Link

replace this code where you are having button element


<td><button onClick={()=>navigateToConfirmed(post)}> Send to RTS </button></td>

now add this function navigateToConfirmed

const navigateToConfirmed= (post) =>{
        navigate(`/confirmed`, { state: post}); // here we will redirect user and send your data into state
     }

once you are redirected to confirmed component you need to extract your post which we sent earlier

import this

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

now to get your data

const {state} = useLocation();

console.log(state) // here you get your post data

edited Jun 10, 2022 at 9:02

answered Jun 10, 2022 at 8:55

Aman Sadhwani

3,6283 gold badges20 silver badges29 bronze badges

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

5 Comments

freakrobot Over a year ago

This works fine but I want to get only the table row that user clicks on. Console shows all the data that I have on pending.js file. Is there a way that I can get only selected row to next page.

freakrobot Over a year ago

It only shows the required row on the console and I was wrong before. Can u please tell me how to display that state data on web page.

Aman Sadhwani Over a year ago

you can now render it like {state.address}

freakrobot Over a year ago

Thank you so much.. You saved my day.. I'm extremely grateful.. One last question.. Can you say in brief how I am supposed to keep track on the records that user already clicked confirmed. because when I go back and click on another record I can not see the previous record. Do I have to implement a function for that.

Aman Sadhwani Over a year ago

that depends on what you wish to do onclick of redirect you can update it in backend database

Collectives™ on Stack Overflow

How to pass table row data as props to another page using onClick event in React Js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related