ProjectListdotjsx

import React, { useState, useEffect } from "react";
import ActiveProject from "./ActiveProject";
import ProjectModal from "./Modals/ProjectModal";
import NotActiveProject from "./NotActiveProject";

export default function ProjectList({ projects, loading, updateProjectList }) {
    const [pjModalShow, setPjModalShow] = useState(false);
    const [pjModalTitle, setPjModalTitle] = useState(false);
    const [editProjectData, setEditProjectData] = useState(null);

    const handlePjEdit = (id, currentProjects) => {
        console.log("In handlePjEdit", projects);
        const selectPj = projects.find((row) => row.id == id);
        setEditProjectData(selectPj);
        setPjModalShow(true);
        setPjModalTitle("Edit");
    };
    // console.log("ProjectList rendered with projects:", projects);
    useEffect(() => {
        console.log("ProjectList: ", projects);
    }, [projects]);

    return (
        <div className="col-5">
            <ProjectModal
                show={pjModalShow}
                handleClose={() => setPjModalShow(false)}
                title={pjModalTitle}
                editData={editProjectData}
                updateProjectList={updateProjectList}
            />

            <div
                className="card"
                style={{ borderTop: "5px solid rgb(87, 164, 236)" }}
            >
                <div className="card-header py-2">
                    <div className="d-flex justify-content-between">
                        <span>Project List</span>
                        <button
                            className="btn btn-sm btn-primary"
                            onClick={() => {
                                setPjModalShow(true);
                                setPjModalTitle("Add New");
                            }}
                            disabled={loading}
                        >
                            <i className="fa-solid fa-circle-plus"></i> Add PJ
                        </button>
                    </div>
                </div>
                <div className="card-body">
                    <nav>
                        <div
                            className="nav nav-tabs"
                            id="nav-tab"
                            role="tablist"
                        >
                            <button
                                className="nav-link active"
                                id="nav-active-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-active"
                                type="button"
                                role="tab"
                                aria-controls="nav-active"
                                aria-selected="true"
                            >
                                Active
                            </button>

                            <button
                                className="nav-link"
                                id="nav-deactive-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-deactive"
                                type="button"
                                role="tab"
                                aria-controls="nav-deactive"
                                aria-selected="false"
                            >
                                Not Active
                            </button>
                        </div>
                    </nav>
                    <div className="tab-content" id="nav-tabContent">
                        <ActiveProject
                            projects={projects}
                            loading={loading}
                            handleEdit={handlePjEdit}
                        />
                        <NotActiveProject projects={projects} />
                    </div>
                </div>
            </div>
        </div>
    );
}