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

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.

CodePudding user response：

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
  })
};