Active Card ZIndex

Any active card should automaticly be brought to the front before all other cards when selected or when being modified. To resolve this, We'll create a new method which will set the zIndex for the active cards, as well as update the zIndex for all other cards, ensuring they are place behind the active card.

This function will sit in src/utils.js

export const setZIndex = (selectedCard) => {
    selectedCard.style.zIndex = 999;
 
    Array.from(document.getElementsByClassName("card")).forEach((card) => {
        if (card !== selectedCard) {
            card.style.zIndex = selectedCard.style.zIndex - 1;
        }
    });
};

We'll use this function on two seperate occasions within our NoteCard component. We'll add this into the mouseDown function to indicate an active state, and onFocus in the textarea element.

const mouseDown = (e) => {
    setZIndex(cardRef.current);
 
    //...
};

Trigger on focus

<div className="card-body">
        <textarea
            onFocus={() => {
                setZIndex(cardRef.current);
}}