To pass values into useNavigate() react-router-dom and use it in the redirected component

I’m trying to pass values from one component to another using useNavigate(). I tried with another answer I saw on stackoverflow but I’m getting blank page on redirection.

This is my TableList.js where the data is shown as a table row.

TableList.js

import { TableRow, TableCell } from '@aws-amplify/ui-react';
import { EditOutlined } from "@ant-design/icons";
import { useNavigate } from 'react-router-dom';

const TableList = ({ val }) => {

  let navigate = useNavigate();

  const valuePassing = function (val) {
    navigate("/CRM7Edit", {
      state: val
    })
  };

  return (
    <TableRow> 
            <TableCell>{val.campaignOwner}</TableCell>
            <TableCell>{val.campaignName}</TableCell>
            <TableCell>{val.startDate}</TableCell>
            <TableCell>{val.endDate}</TableCell>
            <TableCell>{val.expectedRevenue}</TableCell>
            <TableCell>{val.budgetedCost}</TableCell>
            <TableCell>{val.actualCost}</TableCell>

            {/* Editing icon */}

            <TableCell>
              <EditOutlined className="buttons-crm9" onClick={valuePassing}/>
            </TableCell>
          </TableRow>
  )
}

export default TableList;

The valuePassing() navigates to another component with the values.

CRM7Editable is the component where I want to display the values.

CRM7Editable.js

import { TextField } from "@aws-amplify/ui-react";
import { useLocation } from 'react-router-dom';

export default function CRM7Editable(props) {

  let navigate = useNavigate();
  const { state } = useLocation(); // This one I saw in some other stackoverflow answer
  console.log(state);

  return (
    <TextField
      width="400px"
      height="36px"
      position="absolute"
      left="915px"
      top="375px"
      defaultValue={props.location.state.setCampaignOwner} // the value will be given here as a default value
      textAlign="left"
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[1]")}
    ></TextField>

    <TextField
      width="400px"
      height="36px"
      position="absolute"
      textAlign="left"
      left="240px"
      top="235px"
      defaultValue={props.location.state.setCampaignName}}
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[3]")}
    ></TextField>
  );

}

In CRM7Editable I want to set the textfield values as default that are fetched from the TableList data.

My main table code. This is where I have used the TableList component.

CRM9New.js

import React, { useEffect, useState } from "react";
import { Table, TableBody, TableRow, TableCell, TableHead } from "@aws-amplify/ui-react";
import { DataStore } from "@aws-amplify/datastore";
import { Campaign } from '../models';
import "../styles/CRM9.css";
import { TableList } from '.';


export default function CRM9New(props) {

  const [ campaigns, setCampaigns ] = useState([]);

    useEffect(() => {
      listingCampaignsModels()
    }, []);

    async function listingCampaignsModels() {
      const apiData = await DataStore.query(Campaign);
      // console.log(apiData);
      setCampaigns(apiData);
    };

  return (
    <Table
      variation="bordered"
      highlightOnHover={true}>

      {/* Table Headings */}

      <TableHead>
        <TableRow>
          <TableCell 
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Owner</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Name</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Start Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >End Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Expected Revenue</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Budgeted Cost</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Actual Cost</TableCell>
        </TableRow>
      </TableHead>
      
      {/* TableList */}

      <TableBody>
      {campaigns.map((val, key) => (
        <TableList key={key} val={val}></TableList> // TableList is called here.
      ))}
      </TableBody> 

    </Table>
  );

}

My App.js

import { CRM7ModifiedNew, CRM6New, CRM8New, CRM9New, CRM7Editable } from './components';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


const App = () => {

  return (

    <Router>
        <Routes>
          <Route path="/" element={<CRM6New />}></Route>
          <Route path="/CRM9" element={<CRM9New />}></Route>
          <Route path="/CRM8" element={<CRM8New />}></Route>
          <Route path="/CRM7" element={<CRM7ModifiedNew />}></Route>
          <Route path="/CRM7Edit" element={<CRM7Editable />}></Route>
        </Routes>
      </Router>

  );

}

export default App;

Can someone help me. I just want to pass the values from one component to another while navigating and display them.

>Solution :

you just need to remove the params of your function, the state will take the val you sending from props.

const valuePassing = function () {
  navigate("/CRM7Edit", {
    state: val
  })
};