Discussion on: Simplify condition rendering in React.js

import React, { useContext, useState } from "react"

const SwitchContext = React.createContext()

function ensureArray(ar) {
    return Array.isArray(ar) ? ar:[ar].filter((f) => f!==undefined)
}

function noop() {}

export function Switch({ value, children }) {
    const [switchContext] = useState({ cases: {} })
    switchContext.value = value
    return <SwitchContext.Provider value={switchContext}>{children}</SwitchContext.Provider>
}


export function Case({ when, children, execute = noop }) {
    const toCheck = ensureArray(when)
    const { value, cases } = useContext(SwitchContext)
    let condition = toCheck.some((when) => {
        if (typeof when === "function") {
            return when(value)
        } else {
            return when === value
        }
    })

    cases["" + when] = condition
    if (condition) {
        execute()
        return <>{children}</>
    } else {
        return null
    }
}

export function CaseElse({ children }) {
    const { cases } = useContext(SwitchContext)
    if (!Object.values(cases).some((v) => !!v)) {
        return <>{children}</>
    }
    return null
}

 <Switch value={column.type}>
            <Case when="action">
                <TableCell className={classes.tight} onClick={prevent(noop)}>
                    <LoadedAction column={column} item={item} />
                </TableCell>
            </Case>
            <Case when={["more", "than", "one", "reason", ()=>column.name === "including this!"]}>
                   {/* Some other cell */}
            </Case>
            {/* Other cases */}
            <CaseElse>
                <TableCell className={classes.tight}>
                    <LoadedColumn column={column} item={item} />
                </TableCell>
            </CaseElse>
</Switch>