Olá Pedro, tudo bem?
No exemplo do vídeo, o erro de incompatibilidade ocorre porque o componente Time pode retornar dois tipos diferentes: um JSX ou uma string vazia. O TypeScript é mais rigoroso com tipos do que o JavaScript, e ele espera que a função de um componente sempre retorne um tipo consistente.
No caso específico do componente Time, o código original tinha algo assim:
const Time = (props: TimeProps) => {
const css = { backgroundColor: props.corSecundaria }
return (
(props.colaboradores.length > 0) ? <section className='time' style={css}>
<h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
<div className='colaboradores'>
{props.colaboradores.map(colaborador =>
<Colaborador
corDeFundo={props.corPrimaria}
key={colaborador.nome}
nome={colaborador.nome}
cargo={colaborador.cargo}
imagem={colaborador.imagem}
/> )}
</div>
</section>
: ''
)
}
Aqui, se props.colaboradores.length for maior que 0, ele retorna um JSX. Caso contrário, retorna uma string vazia ''. Esse comportamento é o que causa o erro de incompatibilidade, pois o TypeScript não aceita que uma função possa retornar tipos diferentes.
Pra resolver isso, como mencionado no vídeo, podemos usar um React Fragment, que é uma solução elegante para retornar um JSX vazio sem adicionar elementos desnecessários ao DOM. Veja como ficaria:
const Time = (props: TimeProps) => {
const css = { backgroundColor: props.corSecundaria }
return (
(props.colaboradores.length > 0) ? <section className='time' style={css}>
<h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
<div className='colaboradores'>
{props.colaboradores.map(colaborador =>
<Colaborador
corDeFundo={props.corPrimaria}
key={colaborador.nome}
nome={colaborador.nome}
cargo={colaborador.cargo}
imagem={colaborador.imagem}
/> )}
</div>
</section>
: <></>
)
}
Ao usar <></>, estamos retornando um React Fragment, que é tratado como um JSX válido, e assim, o TypeScript não reclama de tipos incompatíveis.
Espero ter ajudado.
Um abraço e bons estudos.
