Javascript – How to effectively use a map to generate a config based on selected cells in a grid?

I would probably do it a bit differently.. since you tagged reactjs I wrote up a rough component that you might be able to make use of.

First, you’re using map to iterate through the selectedCells list, but map returns an array that you’re not using, so it’s not exactly the right tool for the job here. Instead I’d just loop through the array using a forEach.

I’d define an object that specificies the permissions for each cell, and I’d do it outside the component so it didn’t get redefined on every render, or need to be passed to useEffect and such.

I’d have a piece of state for the permitted actions, and I’d set them accordingly..

Finally, somewhere in the return, I’d only print the actions that were still permitted.

EDIT: I thought of another way to do it that I like better because it doesn’t require iterating through the entire list of cells on every click.. This might be more efficient. I’ll keep the original idea at the bottom.

Here’s the new idea

// with this method, we only have to define the actions that aren't allowed by each cell
let permissions = {
    cell1: {
        action3: false,
        action4: false,
    },
    cell3: {
        action1: false,
        action2: false,
        action4: false,
    },
    cell4: {
        action1: false,
        action2: false,
        action3: false,
    }
};

const Whatever = props => {
    
    // all actions are permissable by default, or you can set these to false if you want
    const [permittedActions,setPermittedActions] = useState({
        action1: { permitted: true, because: [] },
        action2: { permitted: true, because: [] },
        action3: { permitted: true, because: [] },
        action4: { permitted: true, because: [] },
    });

    let handleSelect = cell => {
        if ( permissions[cell.id] ) {
            // there are some rules defined for this cell, let's apply them
            setPermittedActions(previousState=>{
                let newState = {...previousState};
                for (const [key, value] of Object.entries(permissions[cell.id])) {
                    if ( !value ) {
                        // whatever action this is, it's not permitted by this cell
                        // we'll keep track of all the cells that don't permit this action
                        newState[key].permitted = false;
                        newState[key].because.push(cell.id);
                    }
                }
                return newState;
            });
        }
    }; // handleSelect

    let handleDeselect = cell => {
        if ( permissions[cell.id] ) {
            // again, rules have been set up for this cell, let's review them
            setPermittedActions(previousState=>{
                let newState = {...previousState};
                for (const [key, value] of Object.entries(permissions[cell.id])) {
                    if ( !value ) {
                        // this cell did not permit the action in question. Let's remove it
                        // from the list
                        newState[key].because = newState[key].because.filter(cellID=>cellID !== cell.id);

                        // are there any cells left that didn't permit this action? If not, we can
                        // set it to be permitted
                        if ( !newState[key].because.length ) {
                            newState[key].permitted = true;
                        }
                    }
                }
                return newState;
            });
        }
    }; // handleSelect

    return (
        <div>
            {
                // whatever you need for your grid etc etc
                // make sure to add the handlers for when each cell is selected and de-selected
            }
            { permittedActions.action1.permitted && ( <div>action 1 stuff here</div> ) }
            { permittedActions.action2.permitted && ( <div>action 2 stuff here</div> ) }
            { permittedActions.action3.permitted && ( <div>action 3 stuff here</div> ) }
            { permittedActions.action4.permitted && ( <div>action 4 stuff here</div> ) }
        </div>
    );
}; // Whatever

Here’s the old idea

let permissions = {
    cell1: {
        action1: true,
        action2: true,
        action3: false,
        action4: false,
    },
    cell3: {
        action1: false,
        action2: false,
        action3: true,
        action4: false,
    },
    cell4: {
        action1: false,
        action2: false,
        action3: false,
        action4: true,
    }
};

const Whatever = props => {
    
    // all actions are permissable by default, or you can set these to false if you want
    const [permittedActions,setPermittedActions] = useState({
        action1: true,
        action2: true,
        action3: true,
        action4: true
    });
    
    useEffect(()=>{
        /* we're going to loop through the list of selected cells and check if
        * a rule has been set for that cell. If so, we'll appy those rules.
        * We'll start out by assuming all actions are permitted, and we'll
        * turn some of them to false as necessary
        */
        let permitted = {
            action1: true,
            action2: true,
            action3: true,
            action4: true
        };
        selectedCells.forEach(cell=>{
            if ( permissions[cell.id] ) {
                // ok there's a list of rules for this cell. let's check them
                for (const [key, value] of Object.entries(permissions[cell.id])) {
                    // is this action still permitted? Is the current rule telling us not to permit it?
                    // if so then we must set this action to false.
                    if ( permitted[key] && !value ) {
                        permitted[key] = false;
                    }
                }
            }
        });
        // ok let's update our state with the new object
        setPermittedActions( permitted );
    },[
        selectedCells
    ]);

    return (
        <div>
            {
                // whatever you need for your grid etc etc
            }
            { permittedActions.action1 && ( <div>action 1 stuff here</div> ) }
            { permittedActions.action2 && ( <div>action 2 stuff here</div> ) }
            { permittedActions.action3 && ( <div>action 3 stuff here</div> ) }
            { permittedActions.action4 && ( <div>action 4 stuff here</div> ) }
        </div>
    );
}; // Whatever