**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!!!

CodePudding user response：

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

CodePudding user response：

You need only one id. You can get this id when you mapping projects in MyProjectList.js file at this line paginatedProject.map((user, _id) => ().

Just get projectid from user and then send it into onClick like this:

onCLick = {(e) => onRowClick(e, user.projectId)}