More efficient and cleaner way

const Bar = () => <div>Bar</div>;
const Baz = () => <div>Baz</div>;

const componentMap = {
    bar: Bar,
    baz: Baz,
};

const Foo = ({ iconId }) => {
    const ComponentToRender = componentMap[iconId];

    if (!ComponentToRender) {
        // Fallback: render nothing or a message
        return <div style={{ color: 'red' }}>Component not found for iconId: {iconId}</div>;
    }

    return <ComponentToRender />;
};

const EntireApp = () => (
    <div>
        <div>Some other important content</div>
        <Foo iconId="foz" /> {/* Invalid iconId won't crash the app */}
    </div>
);

Why better?

1. O(1) lookup instead of O(n).
2. Avoids .find() completely
3. More readable for large mappings