Components Will Not Render After a UseState Change

Question

This is a difficult question because there are so many moving parts, but allow me to attempt to explain the scenario before I start shoving code in everyone's face. My goal is to allow managers to have a screen where all their drivers are displayed. They will have minimal information displayed and an edit button. If the user clicks the edit button they will stay on the same page. There is a useState, const [driverSelected, setDriverSelected] = useState("") that once an edit button is clicked, will call setDriverSelected to be the driver, not just the id. So once an edit button is clicked, an actual new value for driverSelected would look like this...

{id: 'a049c673-da36-48e6-8fbd-32ab925b6178', role: 'USER', firstname: 'STEVEN', lastname: 'MONROE', email: 'TQRGJGNFQVIO', …}
deleted: false
email: "TQRGJGNFQVIO"
firstname: "STEVEN"
id: "a049c673-da36-48e6-8fbd-32ab925b6178"
lastname: "MONROE"
locked: false
phoneNumber: "null"
profilePick: null
role: "USER"
__typename: "Driver"
[[Prototype]]: Object

Based on this, the same page will change from displaying all the drivers to just the one selected, and input fields to change his/her attributes. This all works properly. From here, you hit submit and it sends a mutation over to the database. This also works. Then, a query is automatically launched to send the user back the new driver data. This also also works. Where everything breaks is once the mutations/queries are run, I also run setDriverSelected({id: -1}) which should render the drivers list again, but nothing appears at all. I thought it may be an issue with the data flow, but it isn't. I have console.log statements everywhere along the way from the mutation to the re-render, and at every point the console.log statements return exactly what they're supposed to. No errors in the console, no failed fetches or anything like that from the network. I just literally get nothing. I've even tried replacing all the data with static information, still nothing. The code is all spread out too across about 7 files since I was trying to compartmentalize as much as possible while using React, so bare with the ugly mess of code files you're about to see.

This is the first page in question, the one that is in charge of either rendering the list OR the driver's fields when chosen.

import React from "react";
import { useState } from "react";
import { useRecoilState } from "recoil";
import { userState } from "../../recoil/atoms";
import SideMenu from "../../components/Home/SideMenu/SideMenu";
import DriverCard from "./DriverCard";
import EditDriver from "./EditDriver";
import "../../styles/EditDrivers/EditDriversLanding.css"

const EditDriversLanding = () => {


    // Recoil Data
    const rawUser = useRecoilState(userState)
    console.log(rawUser)
    const user = rawUser[0]

    // Local states
    const [getSearch, setSearch] = useState("")
    const [driverSelected, setDriverSelected] = useState({id: -1})

    // Based off of what you type in the search bar, it will filter out invalid employees
    const filterDriversList = (list) => {
        let filteredList = []
        if (getSearch == ""){
            return list
        }
        else{
            let filterString = getSearch.toUpperCase()
            list.forEach( (driver) => {
                if (driver.firstname.includes(filterString) || driver.lastname.includes(filterString)){
                    filteredList.push(driver)
                }
            })
            return filteredList
        }
    }
    
    // Takes the list of drivers and renders them all into a list of components
    const renderDriverCards = (list) => {
        let i = 0
        console.log("Okay.... like dude you're RIGHT here, RENDER")
        console.log(list)
        return list.map( (driver)=> {
            i++
            if (i == 1){
                console.log(driver)
                console.log("WHY WONT YOU WORK???")
            }
            return (<DriverCard driver={driver} key={i} setDriverSelected={setDriverSelected} />)
        })
    }

    const renderListOrEditScreen = () => {
        // No Driver selected
        if (driverSelected.id == -1){
            console.log("dude.... render!!!")
            return(
                <div className="overlay">
                    <div className="edit-landing-container">
                        <SideMenu /> 
                        <div className="edit-landing-search-bar">
                            <input type="text" onChange={(event) => setSearch(event.target.value)} />
                        </div>
                        <div className="edit-landing-drivers-list">
                            {renderDriverCards(filterDriversList(user.drivers))}
                        </div>
                    </div>
                </div> 
            )
        }
        // Driver Selected
        else{
            return(
                <div className="overlay">
                    <div className="edit-landing-container">
                        <SideMenu /> 
                        <div>
                            <EditDriver driverData={driverSelected} setDriverSelected={setDriverSelected}/>
                        </div>
                    </div>
                </div>
            )
        }
    }

    if (driverSelected.id == -1){
        console.log("should be rendering...")
    }
    return (
        <div>
            {renderListOrEditScreen()}
        </div>
    )
}


export default EditDriversLanding

Its worth mentioning again that this file above works perfectly the first time it is rendered, but after a driver is edited, NOTHING renders-- not a single <div>

Here is the file for the <DriverCard />

import React from "react";
import "../../styles/EditDrivers/EditDriversLanding.css"


const DriverCard = ({driver, setDriverSelected}) => {
    console.log(driver)
    console.log("dude just work bro")
    return(
        <div className="edit-drivers-driver-card">
            <div>
                Image
            </div>
            <div>
                <div>{driver.firstname} {driver.lastname}</div>
                <div>{driver.email}</div>
                <div>{driver.phoneNumber}</div>
                <div className="edit-driver-driver-card-edit-button" onClick={() =>setDriverSelected(driver)}>Edit</div>
            </div>
        </div>
    )
}
export default DriverCard

And finally, here is the EditDriver page which is where the mutation and re-query take place. Notice here you'll see a <div> that on press will also setDriverSelected({id: -1}) and THAT one decides to work-- just the submitting changes kills everything.

import React from "react";
import { useState } from "react";
import DriverField from "../../components/EditDrivers/DriverField";
import SubmitEdits from "./submitEdits";
import "../../styles/EditDrivers/EditDriversLanding.css"


const EditDriver = ({driverData, setDriverSelected}) => {

    const [driver, setDriver] = useState(driverData)

    const handleInput = (event) => {
        const input = { ...driver };
        input[event.target.id] = event.target.value;
        setDriver(input);
    };

    return(
        <div className="edit-driver-editting-page">
            <div onClick={() => setDriverSelected({id: -1})} className="edit-driver-editting-page-exit-button">
                Return to Driver Selection
            </div>
            <div>
                <h2>Edit {driverData.firstname}  {driverData.lastname}</h2>
            </div>
            <div>
                <div>
                    <DriverField currentValue={driver.firstname} name="firstname" handleInput={handleInput} />
                </div>
                <div>
                    <DriverField currentValue={driver.lastname} name="lastname" handleInput={handleInput} />
                </div>
                <div>
                    <DriverField currentValue={driver.email} name="email" handleInput={handleInput} />
                </div>
                <div>
                    <DriverField currentValue={driver.phoneNumber} name="phoneNumber" handleInput={handleInput} />
                </div>
                <SubmitEdits driver={driver} setDriverSelected={setDriverSelected}/>
            </div>
        </div>
    )
    

}

export default EditDriver

Answer 1

It's hard to say why nothing at all is rendering - but it looks like your landing page component is more complex than it needs to be. It's not often that you need to have functions which render content (e.g. renderListOrEditScreen and renderDriverCards) - often that's a sign that you should break those functions out into their own components.

So, I'd suggest you start by splitting that up into smaller components that do less work. It looks like one of the functions of that page is to act as the "search" page - you could split that up using something like this:

const useFilteredDriversList = (drivers, search) => {
    return useMemo(() => {
        if (!search) return drivers;

        const searchUpper = search.toUpperCase();

        return drivers.filter(driver =>
            driver.firstName.includes(searchUpper) ||
            driver.lastName.includes(searchUpper)
        );
    }, [drivers, search]);
}

const DriverSearch = ({ onDriverSelected }) => {
    const [user] = useRecoilState(userState);
    const [search, setSearch] = useState("");

    const filteredDrivers = useFilteredDriversList(user.drivers, search);

    const handleSearchChange = (event) => setSearch(event.target.value);

    return (
        <>
            <div className="edit-landing-search-bar">
                <input type="text" onChange={handleSearchChange} />
            </div>

            <div className="edit-landing-drivers-list">
                {filteredDrivers.map(driver => (
                    <DriverCard 
                        key={driver.id}
                        driver={driver} 
                        setDriverSelected={onDriverSelected} 
                    />
                ))}
            </div>                    
        </>
    );
}

Note here I've also split out the filtering code from the component - having it inside the component means you're redefining the filter function every time the component renders, which is unnecessary.

OK; now that the search page has been split out, you can just have a landing page component which either shows the search component or the edit component, depending on if a driver has been selected or not. One other thing that I'd do is create an explicit handler for the case of "cancelling" the edit, and have that live in the landing page. The edit page shouldn't have knowledge of how to "cancel" editing (i.e. setting the driver to { id: -1 }) - that's not its responsibility. It should just tell the parent component that it's finished, and let the parent component worry about how to handle that.

Finally, I'd use either null or undefined to represent "no driver selected" rather than a magic object. So, something like this might work:

const DriversPage = () => {
    const [driver, setDriver] = useState(undefined);
    const handleUnselectDriver = () => setDriver(undefined);

    return (
        <div className="overlay">
            <div className="edit-landing-container">
                <SideMenu /> 
                
                {driver && (
                    <EditDriver 
                        driverData={driver}
                        onEditComplete={handleUnselectDriver}
                    />
                )}

                {!driver && (
                    <DriverSearch onDriverSelected={setDriver} />
                )}
            </div>
        </div>
    );
}