Routing to a page when the id needed is not contained within the current page

Question

I'm working on a project where I have returns and orders. My returns are stored as arrays with information such as _id, orderId, orderItems, etc. In my project, I have an OrderHistoryScreen, in which I would like to have the ability to view return details if a return has been made. Within my ReturnScreen I am able to do this within a table where there is a key=returned.id and this button:

<td className="data">
                  <button
                    type="button"
                    className="small"
                    onClick={() => {
                      props.history.push(`/return/${returned._id}`);
                    }}
                  >
                    Details
</button><td className="data">
               

brings me to the page. The issue that I am having is that my OrderHistoryScreen does not have returned as part of it, and the key in for the table is equal to order._id. I figured there should be away to do this since returns contains a variable for order._id = orderId. In my OrderHistoryScreen, I have added:

const returnList = useSelector((state) => state.returnList);
  const { loading, error, returns } = returnList;

in order to be able to access the information from my returns. This returns is an array of all of my returns and their information (_id, orderId, etc.). I have also added a:

const ReturnPageHandler = () => {
    dispatch(detailPageReturn())
   };

And

<td className="data"> 
     <button
       onClick={() => ReturnPageHandler(order._id)}
       className="small"
     >
       Return Details
     </button> 
</td> 

detailPageReturn is contained within my returnsAction.js document and pushes to (`/return/${returned._id}`)

I have tried to get the return._id a number of ways, but none of them seem to be working. I would really appreciate any help or guidance on how to accomplish this.

Types of attempts:

   const returnIdInfo = returns.find((x)=> x.orderId = order._id)._id

const ReturnPageHandler = (returnIdInfo) => {
    dispatch(detailPageReturn(returnIdInfo))
   };

...

 <button
                    type="button"
                    className="small"
                    onClick={() => {detailPageReturn(order._id)}}
                  >
                    Details
                  </button>

And Similarly:

const ReturnPageHandler = (returns) => {
    dispatch(detailPageReturn(returns.find((x) => x.orderId = order._id)._id))
   };

...

 <button
                    type="button"
                    className="small"
                    onClick={() => {detailPageReturn(order._id)}}
                  >
                    Details
                  </button>

Additionally:

const returnInfo = returns.map(returns => ({ returnedId:returns._id, orderId: returns.orderId }))
const returnInf = returnInfo.find((x)=> x.orderId = order._id)
const returnInfs = returnInf._id

const ReturnPageHandler = (returnInfs) => {
    dispatch(detailPageReturn(returnInfs))
   };
...

In this case, I tried creating a separate component:

**ReturnInfo.js** 

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteReturn, listReturns, deliverReturn } from '../actions/returnActions';
import { returnOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { RETURN_DELETE_RESET } from '../constants/returnConstants';

export default function ReturnInfoButton(props) {
  const {show} = props;
  const returnList = useSelector((state) => state.returnList);
  const { loading, error, returns } = returnList;
  const returnDelete = useSelector((state) => state.returnDelete);
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = returnDelete;

  const userSignin = useSelector((state) => state.userSignin);
  const { userInfo } = userSignin;
  const dispatch = useDispatch();
  useEffect(()=>{
    dispatch(listReturns())
  },[listReturns,dispatch])

  const returnId = returns.find((x) => x.orderId = {show})._id

  useEffect(() => {
    dispatch({ type: RETURN_DELETE_RESET });
  }, [dispatch, successDelete, userInfo._id]);


  return (
    <div className="rating">
    <tr  //key={returned._id}
    >
       <button
                    type="button"
                    className="small"
                    onClick={() => {
                      props.history.push(`/return/${returnId}`);
                    }}
                  >
                    Details
                  </button>
    </tr>
    </div>
  );
}

**OrderHistoryScreen.js** 

return(
...

<ReturnInfoButton show ={order._id}>
</ReturnInfoButton>
)

OrderHistoryScreen full document:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { listOrderMine, detailsOrder } from '../actions/orderActions';
import { listReturns} from '../actions/returnActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { createReturn, detailPageReturn } from '../actions/returnActions';
import { RETURN_CREATE_RESET } from '../constants/returnConstants';


export default function OrderHistoryScreen(props) {
  const order = useSelector((state) => state.order);
  const returnList = useSelector((state) => state.returnList);
  const { returns } = returnList;


  const orderMineList = useSelector((state) => state.orderMineList);
  const { loading, error, orders } = orderMineList;
  console.log({ orders });
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(listOrderMine());
  }, [dispatch]);



  useEffect(()=>{
    dispatch(listReturns())
  },[listReturns,dispatch])

   const ReturnPageHandler = (vs) => {
    dispatch(detailPageReturn(vs))
      //returns.find((x) => x.orderId = order._id)))
   // console.log(returns.find((x) => x.orderId = order._id))
   };
   


   const addToDevolucionHandler = (orderId) => {
     props.history.push(`/make-return/${orderId}`);
   };

  return (
    <div>
      <h1>Order History</h1>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
            <table className="table">
              <thead>
                <tr className="table_row">
                  <th className="main">ID</th>
                  <th className="main">TOTAL</th>
                  <th className="main">RETURNED</th>
                  <th className="main">ACTIONS</th>
                </tr>
              </thead>
              <tbody>
                    <tr className="table_row" key={order._id}>
                      <td className="data">{order._id}</td>
                      <td className="data">{order.totalPrice.toFixed(2)}</td>
                      <td className="data">
                        {order.isReturned ?
                         <div>{order.returnedAt.substring(5, 7)}-{order.returnedAt.substring(8, 10)}-{order.returnedAt.substring(0, 4)}</div>  
                         : 'No'}
                      </td>
                    
                     <td className="data"> 
                      <button
                          onClick={() => ReturnPageHandler(order._id)}
                          className="small"
                        >
                          Return Details
                        </button> 
                        </td> 
                      
                    </tr>
              </tbody>
            </table>
          )}
    </div>
  );
}