Ternary Operator not displaying row when condition is false but displays when true

Question

I usually don't post on here but I've been scratching my head at this for a couple days now. I have a tabbed table that's suppose to display applicants that have been accepted in one and applicants that are pending in the other. So basically:

Condition is true: Display the accepted applicants Condition is false: Don't display the accepted applicants

When I make the value true on the database it shows up no problem but when I change it to false it doesn't show on my table even though I know the ternary operator is working properly. Below are my tables, the second one is the one for the accepted applicants

<div className="tab-row text-left">
    <h1>Pro Applicants</h1>
    <h4 className="dashboard-header_sub" > Review new pros and grow your network! Manage BeautyLynk pro applicants here.</h4>
    <br />
    <Tab>
        <Tab.TabPane key={`Tab-3`} tab={"Pending Applicants"}>
            <div className="dashboard-table">
                {
                    applicants.length ?
                        <>
                            <table className="darkTable">
                                    <thead>
                                        <tr>
                                            <th><h4>Name</h4></th>
                                            <th><h4>Email</h4></th>
                                            {width > 1000 ? <th><h4>Location</h4></th> : ""}
                                            <th><h4>Licensed</h4></th>
                                            <th><h4>Submission Date</h4></th>
                                            <th><h4>Available By</h4></th>
                                            <th><h4>Actions</h4></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {currentApplicants.map((applicant) => (
                                            !applicant.isAccepted && !applicant.isDeclined? 
                                                <tr key={applicant.id}>
                                                    <td className="dashboard-table_serviceType">
                                                        <p>{applicant.firstName} {applicant.lastName}</p>
                                                    </td>
                                                    <td>{applicant.email}</td>
                                                    {width > 1000 ? <td>
                                                        <p>{applicant.location}</p>
                                                    </td> : ""}
                                                    <td>
                                                        {applicant.isLicensed ? "Yes" : "No"}
                                                    </td>
                                                    <td>{dateFormat(applicant.created_at)}</td>
                                                    <td>{dateFormat(applicant.dateaAvailable)}</td>
                                                    <td className="dashboard-booking_detail">
                                                        {
                                                            <div >
                                                                <a title="Click here to view more details or accept this applicant" href={`/pro-applicant?id=${applicant.id}`} to={`/pro-applicant?id=${applicant.id}`}>
                                                                    View Details
                                                                </a>
                                                            </div>  
                                                        }
                                                    </td>
                                                </tr>    
                                            : ""
                                        ))}
                                    </tbody>
                                </table> 
                                <Pagination length={applicants.filter((applicant) => applicant.isAccepted == false && applicant.isDeclined == false).length} rowsPerPage={rowsPerPge} handlePagination={handleBookingPagination} currentPage={currentApplicantsPage} type="applicants"/>
                        </>
                        : <table className="darkTable">
                            <thead>
                            </thead>
                            <tbody className="dahsboard-empty_pending">
                                <h1> No Pending Appointments </h1>
                            </tbody>
                        </table>  
                }
            </div>
        </Tab.TabPane>
        <Tab.TabPane key={`Tab-4`} tab={"Accepted Applicants"}>
            <div className="dashboard-table">
                {
                    applicants.length ?
                        <>
                            <table className="darkTable">
                                    <thead>
                                        <tr>
                                            <th><h4>Name</h4></th>
                                            <th><h4>Email</h4></th>
                                            {width > 1000 ? <th><h4>Location</h4></th> : ""}
                                            <th><h4>Licensed</h4></th>
                                            <th><h4>Submission Date</h4></th>
                                            <th><h4>Actions</h4></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {currentApplicants.map((applicant) => (
                                            !applicant.isAccepted? 
                                                <tr key={applicant.id}>
                                                    <td className="dashboard-table_serviceType">
                                                        <p>{applicant.firstName} {applicant.lastName}</p>
                                                    </td>
                                                    <td>{applicant.email}</td>
                                                    {width > 1000 ? <td>
                                                        <p>{applicant.location}</p>
                                                    </td> : ""}
                                                    <td>
                                                        {applicant.isLicensed ? "Yes" : "No"}
                                                    </td>
                                                    <td>{dateFormat(applicant.created_at)}</td>
                                                    <td className="dashboard-table_actions">
                                                        {
                                                            applicant.isAccepted ? <p className="dashboard-table_status-green">ACCEPTED</p>
                                                                : <p className="dashboard-table_status-grey">DECLINED</p>
                                                        }
                                                    </td>
                                                </tr>    
                                            : "none"
                                        ))}
                                    </tbody>
                                </table> 
                                <Pagination length={applicants.filter((applicant) => applicant.isAccepted == true && applicant.isDeclined == false).length} rowsPerPage={rowsPerPge} handlePagination={handleBookingPagination} currentPage={currentApplicantsPage} type="applicantsComp"/>
                        </>

                        : <table className="darkTable">
                            <thead>
                            </thead>
                            <tbody className="dahsboard-empty_pending">
                                <h1> No Pending Appointments </h1>
                            </tbody>
                        </table>  
                }
            </div>
        </Tab.TabPane>
        
    </Tab>
</div>

I've tried using different variation of conditions to check if its true and figured out the the operator is evaluating properly but the row just wont display. I've checked, double checked, and triple checked and don't know whats going on. Scraping it for now but could really use some help

Thank you in advance!

Answer 1

I have noticed some inconsistencies in your code, it would be desirable to organise it a bit better and Im sure you will find the root cause of your problem.

Some considerations:

Conditional Rendering Logic:

For the "Accepted Applicants" table, the condition !applicant.isAccepted appears to be incorrect based on your description. This condition will exclude all accepted applicants, which contradicts the purpose of this tab. If you aim to display accepted applicants, you should change this condition to applicant.isAccepted. Similarly, the ternary operator returning an empty string (: "none") is not ideal for React's conditional rendering. Consider using null instead if you don't want to render anything. Duplication:

There's a noticeable duplication between the tables for pending and accepted applicants, especially in the table structure. Consider creating a single component for the table and passing in filtered applicants based on their status (pending or accepted) as props. This approach reduces code repetition and improves maintainability.

Filtering Logic:

The current method of filtering applicants within the JSX can be optimised by moving this logic outside of the return statement. Preparing your currentApplicants array before the return statement makes the JSX cleaner and easier to read.

Pagination Component:

The logic to determine the length of applicants passed to the Pagination component is repeated. Consider creating a function that returns the filtered list of applicants based on their status. This function can then be used to render the tables and to calculate the length prop for the Pagination component.

Example of filtering outside JSX

const acceptedApplicants = applicants.filter(applicant => applicant.isAccepted && !applicant.isDeclined);
const pendingApplicants = applicants.filter(applicant => !applicant.isAccepted && !applicant.isDeclined);