Mas como poderei passar uma condição como nome do objeto? Exemplo:

```js
const elementosPorCondicao = {
  (name.length > 0): <Elemento1 />,
};
```

Costumo utilizar a seguinte syntax:
```js
return (name.length > 0) && <Elemento1 />;
```

Pega o retorno da condição:


```jsx
const possibleConditions = {
    true: <Element />,
    false: null
};

const name = "this is my name";

const condition: boolean = name.length > 0;

return possibleConditions[condition];
```

Constumo usar uma estrategia de RenderIf. Que Acho bem mais atrativa do que a sintaxe padrão do React.

> Exemplo do component

```JSX
import React from 'react';

const RenderIf = ({ condition, children }) => {
  return condition ? <>{children}</> : null;
};

export default RenderIf;
```

> Como usar ?
```JSX
isLoggedIn = true;

...
<RenderIf condition={isLoggedIn}>
    <p>Você está logado. Exiba conteúdo confidencial aqui.</p>
</RenderIf>
...
```

Caraca muito massa essa dica, vou passar a usae nos meus projetos. Deixa interface muito mais declarativa.

Mas como poderei passar uma condição como nome do objeto? Exemplo: const elementosPorCondicao = { (name.length > 0): , }; Costumo utilizar a seguinte syntax: return (name.length > 0) && ; `