Tive a impressão de haver um pequeno erro aqui:
Uma estratégia interessante para resolver esse problema é criar um componente que irá ajudar a deixar o código mais limpo, e poderá ser reutilizado em todo o projeto. Vamos dar uma olhada:
interface RenderIfProps {
condition: boolean;
}
export const RenderIf: React.FC<RenderIfProps> = ({condition}, children) => {
return condition ? children : <></>;
};
Mais precisamente na declaração da função RenderIf
, acredito que children seja uma propriedade do objeto que ela recebe como primeiro parâmetro, e não segundo parâmetro. Tentei copiar o código do jeito que está aqui, e acabei tendo um erro:
Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
Assim passou a funcionar:
import React, { ReactElement } from 'react'
interface RenderIfProps {
condition: boolean
children: ReactElement<any, any>
}
export const RenderIf: React.FC<RenderIfProps> = ({ condition, children }) => {
return condition ? children : <></>
}