[Sugestão] low-code | React: como os componentes funcionam

[Sugestão] low-code

Eu produzi um código diferente, onde pratiquei low-code (pouco código) e economizei o uso de if. A única alteração que eu fiz no código, foi essa:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Eu criei uma state de cor e setCor onde o valor dessa state já vinha recebendo o props.corPrimaria. Em seguida criei uma função de mudar a cor onde eu recebo como parâmetro a cor tirada do input-color, fazendo a state setColor inserir o valor do input-color. Como pode ver, lá no input-color, eu coloquei um onChange onde dentro do mesmo eu passo a cor ou valor do input para uma arrow function e chamo a função de mudar de cor passando o valor da cor.target.value, conseguindo o valor certinho da cor e alterando cada cor do time de forma diferente. dessa forma, onde eu quero mudar a cor de algo, eu só chamo a state cor.

Eu acredito que essa forma fica bem mais fácil para dar manutenção no código, já que a função é feita em só um componente. E assim como feito em aula, o console não retornou nenhum erro, e funciona perfeitamente.

Eu só não sei ainda se esse meio que eu produzi deixa o código mais frágil ou não.

Olá Diogo, tudo bem?

Ficou legal sim. E já que funciona, está ótimo. Com o tempo vamos melhorando nossos códigos.

Olhando daqui pelo pouco que conheço tu poderias fazer mais duas alterações:

Não precisas do método "mudarCor", tu poderias utilizar o próprio método do "state" para isso, então no onChange poderias adicionar o "setCor(corDoInput.target.value)", eliminando a criação de um método.
Tu não precisas do ternário no retorno do componente ( condição ? retorno_se_true : retorno_se_false ), já que quando a condição é false tu retorna ' ' (espaço em branco). Poderias utilizar o seguinte:

return (
  p.colaboradores.length > 0 && 
    <section>
       ... seu código.
    </section>
)

O código acima funciona quando você tem uma condição que vai fazer algo apenas se a condição for verdade, caso seja false não será exibido nada, evitando o usuário do ternário. Esse conceito se chama "short-circuit evaluation", que é o uso do && (and).

O que você modificou já melhorou seu código, show de bola.