how to pass Project ID to another component in react.js

Question

**Hello Guys, i create a table in MyProjectList.js file for displaying project data now i want, If user Click on table row then i want to pass this clicked Project Id to Collection.js file to use in query to compare.

*this is MyProjectList.js file.

import React from "react";
import { useEffect, useState } from "react";
import { Table } from "react-bootstrap";
import axios from "axios";
import _ from "lodash";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";

const pageSize = 10;
export default function MyProjectsList() {

  let navigate = useNavigate();
  const [projects, setProjects] = useState();
  const [paginatedProject, setPaginatedProject] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const userState = useSelector(state=> state.loginUserReducer)
  const {currentUser} =userState;

  const coordinatorId = currentUser.id;

  useEffect(() => {
   axios.post("http://localhost:4000/coordinatorsProjects",
   {
     coordinatorId : coordinatorId
    }).then((res) => {
      console.log(res.data,'==>>> this is coordinator projects');
      setProjects(res.data);
      setPaginatedProject(_(res.data).slice(0).take(pageSize).value());
    });
  }, [coordinatorId]);

  const pageCount = projects ? Math.ceil(projects.length / pageSize) : 0;
  const pages = _.range(1, pageCount + 1);

  const pagination = (pageNo) => {
    setCurrentPage(pageNo);
    const startIndex = (pageNo - 1) * pageSize;
    const paginatedProject = _(projects)
      .slice(startIndex)
      .take(pageSize)
      .value();
    setPaginatedProject(paginatedProject);
  };


//***using this function i am nevigate user to colletion.js component. how to pass project id this?

  const onRowClick = async (e) =>  {
   navigate("/coordinators/collection")
   console.log(e)
  }
  return (
    <>
      <div className="container">
        {/* {loading && (<Loading/>)} */}
        {/* {error && alert("Error occured to get data")} */}
        {!paginatedProject ? (
          "ERROR: Data Not Found. Please check your internet connection!"
        ) : (
          <Table className="table table-hover table-light  table-bordered shadow">
            <thead className="thead-dark">
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Start Date</th>
                <th scope="col">End Date</th>
                <th scope="col">Budget Rs.</th>
                <th scope="col">Remaining Rs.</th>
              </tr>
            </thead>
            <tbody>
              {paginatedProject.map((user, _id) => (
                <tr onClick={ onRowClick } key={_id}>
                  <td>{user.projectName}</td>
                  <td>{user.startDate}</td>
                  <td>{user.endDate}</td>
                  <td>{user.budget}</td>
                  <td>{user.remaining}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        )}

        <nav className="d-flex pagination justify-content-center ">
          <ul className="pagination ">
            {pages.map((page) => (
              <li
                className={
                  page === currentPage ? "page-item active" : "page-item"
                }
              >
                <p className="page-link" onClick={() => pagination(page)}>
                  {page}
                </p>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </>
  );
}

*this is Collection.js file.

import React from 'react';
import { useEffect, useState } from "react";
import { Table } from "react-bootstrap";
import axios from "axios";
import _ from "lodash";

const pageSize= 10;

export default function Collection () {
  const [donors, setDonors] = useState()
  const [paginatedDonors, setPaginatedDonors] = useState()
  const [currentPage, setCurrentPage] = useState(1)

  useEffect(() => {
    axios.post("http://localhost:4000/coordinatorsCollection",
    {
      projectID : "7"
     }).then((res)=>{

    console.log(res.data);
    setDonors(res.data);
    setPaginatedDonors(_(res.data).slice(0).take(pageSize).value());
   
  }); 
  }, []);

  const pageCount= donors? Math.ceil(donors.length/pageSize) :0;
  const pages = _.range(1, pageCount+1)

  const pagination= (pageNo) =>{
    setCurrentPage(pageNo)
    const startIndex = (pageNo -1) * pageSize;
    const paginatedDonors = _(donors).slice(startIndex).take(pageSize).value();
    setPaginatedDonors(paginatedDonors)
  }

    return (
        <>
      <div className='container'>
      <h3 align="center">Collection of users</h3>
     {/* {loading && (<Loading/>)} */}
     {/* {error && alert("Error occured to get data")} */}
     {!paginatedDonors ? ("ERROR: Data Not Found. Please check your internet connection!"):(
        <Table className="table table-hover table-light  table-bordered shadow">
          <thead className="thead-dark">
            <tr>        
              <th scope="col">Donor Name</th>
              <th scope="col">Contact No</th>
              <th scope="col">Amount</th>
              <th scope="col">Project</th>
              <th scope="col">Project Budget</th>
              <th scope="col">Donate Date.</th>
            </tr>
          </thead>
          <tbody >
      
              {paginatedDonors.map((donors, id) => (
                  <tr key={id}>
                      
                      <td>{donors.name}</td>
                      <td>{donors.mobileNo}</td>
                      <td>{donors.amount}</td>
                      <td>{donors.project}</td>
                      <td>{donors.projectBudget}</td>
                      <td>{donors.donateDate}</td>
                   
                  </tr>
              ))}
          </tbody>
        </Table>
        )}

 <nav  className="d-flex pagination justify-content-center ">
  <ul className="pagination ">
  
    {
      pages.map((page)=>(
        <li className={
          page === currentPage ? "page-item active" : "page-item"
        }>
          <p className="page-link"
          onClick={()=>pagination(page)}
          >{page}</p></li>
      ) )
    }
  </ul>
</nav>
          </div> 
        </>
    )
};

temporarily i am sending '7' (hard coded) to the api to check and it working fine. But i want clicked project id in this.

thank you!!!

Answer 1

If I were you I would use react context for this situation because your issue is the meaning of using react context; React context is a general state that you can set or edit or use your general state in all your components easily