How to access data from a dynamic Table

Question

Presently learning to code and I have done some work here...

Using MongoDB I hardcoded some data (transactions) retrieved them into a table in the front-end.

In other to do this, I created a js file called TransactionItems and listed the properties of interest like this.

import React   from 'react';
import {Badge} from "reactstrap";




  const TransactionItem = props =>{

  
    return (

     

    <>
       
      <td>{props.transaction.date}</td>
      <td> {props.transaction.amount}</td>
      <td>{props.transaction.token}</td>
      <td>{props.transaction._id}</td>
  
      <td className="text-right"><Badge color="warning"  >
        View
      </Badge>
      </td> 
    </>
    )
}

export default TransactionItem;

I also created a Service connecting to my backend

getTransactions : ()=>{
        return fetch('/user/transactions')
                .then(response=>{
                    if(response.status !== 401){
                        return response.json().then(data => data);
                    }
                    else
                        return {message : {msgBody : "UnAuthorized",msgError : true}};
                });
    },

Then on my Dashboard, I populated a table with data like this

import React, {useEffect, useState} from 'react';

import TransactionItem from '../views/TransactionItems';
import TransactionService from '../Services/TransactionService';
import { Col, Row, Card, CardTitle, CardText, CardBody, CardFooter, CardHeader, Button, Table } from 'reactstrap';




const Dashboard = props=>{
  const [user,setUser] = useState([]);
  const [transactions,setTransactions] = useState([]);


  
 

  useEffect(()=>{
        TransactionService.getTransactions().then(data =>{
            setTransactions(data.transactions);
        
        });
      },[]);








    
  return (
 
    <>
      
                <Table responsive>
                  <thead className=" text-warning">
                    <tr>
                      <th>
                        Date
                      </th>
                      <th>
                        Amount
                      </th>
                      <th>
                        Token
                      </th>
                      <th>
                        Receipt No
                      </th>
                      <th className="text-right">
                        Action
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                     {
                                transactions.map(transaction  =>{
                                    return  (<tr><TransactionItem key={transaction._id} transaction={transaction} loading={loading}/>

                                             </tr>)
                                })
                            }
                  </tbody>
                </Table>
        

      </>
  );
}

export default Dashboard;

When populated it looks like this

I have created a receipt sample for each transaction

import React, {useEffect, useState}from 'react';
import {Row, Container} from "reactstrap";
import AuthService from '../Services/AuthService';
import TransactionService from '../Services/TransactionService';

 


function Receipt(props) {

  const [user,setUser] = useState([]);
  const [transaction,setTransaction] = useState();
  
  const id = ''; 

  useEffect(()=>{
    AuthService.isAuthenticated().then(data =>{
     setUser(data.user);
     });
   },[]);


useEffect(()=>{
     TransactionService.getTransaction(id).then(data =>{
      console.log(data);
         setTransaction(data.transaction);
     });
   },[id]);



    return (
        <div>
            <>
      
                
                   <div style={{color: 'RGB(128, 128, 128)', fontSize: '1rem', 
                        fontWeight: '600', 
                        textAlign: 'left',
                        justifyContent: 'center',  
                        alignContent: 'center'}}>Token Credit:</div>
             
            </>  
   
        </div>
    );
}

export default Receipt;

and created the route on the back end to access each transaction object using the transaction _id. I tried to execute it by also creating a service for this in the front end

getTransaction : (id)=>{
        return fetch('/user/'+id)
      
                .then(response=>{
                    console.log(response.data);
                    if(response.status !== 401){
                        return response.json().then(data => data);
                    }
                    else
                        return {message : {msgBody : "UnAuthorized",msgError : true}};
                });
    },

}

and when tested with a known transaction_id it worked(I console logged the response). But I am not sure how to pass the _id for each transaction on the table such that when the view button is clicked it opens the receipt page and set the state id on the receipt page to the transaction_id of the transaction object, using UseEffect.

Any pointer will be most helpful. Thanks

Answer 1

So here is the solution that worked here

Step 1 Bring in useHistory hook

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

Step 2 Define history inside TransactionItem object.

let history = useHistory();

Step 3 Also define viewRow as such in the inside TransactionItem object.

const viewRow = (e) =>{
       e.preventDefault();
       history.push('/receipt/'+ props.transaction._id);
      };