Dois problemas

Salve!

Vamos lá:

Clonei seu projeto, instalei a dependência e iniciei com npm start. Quando preenchi o formulário, logo depois que selecionei o time, o React já "cuspiu".o erro no console:

Uncaught TypeError: props.onChange is not a function
    at onChange (Dropdown.js:8:1)

Analisar a mensagem de erro me deu a pista de que o componente Dropdown espera uma prop chamada onChange e não a recebeu.

Olhando na implementação do Form.js, encontrei o problema:

        <Dropdown
          required={true}
          label='Times'
          itens={props.squads}
          value={squad}
          handleChange={(value) => setSquad(value)}
        />
`

O handleChange deveria se chamar onChange (seguindo pelo nome da prop que o Dropdown espera). Assim que eu alterei para:

        <Dropdown
          required={true}
          label='Times'
          itens={props.squads}
          value={squad}
          onChange={(value) => setSquad(value)}
        />

A inclusão começou a funcionar! Porém, um novo erro foi mostrado no console. Vou deixar o desafio pra você tentar descobrir e colocar pra funcionar. Depois me conta!

Bons estudos!

P.S.: Fica sempre de olho no console :)

O problema que surge logo em seguida foi resolvido! hashah

Se era a ausência da key, já corrigi e realmente rodou tranquilamente sem maiores problemas.

Os únicos problemas que sobraram são referentes à estilização/responsividade e aos avatares:

Procurei entender o porque das imagens pararem de ser exibidas, mas acho que estou deixando passar alguma coisa. O que não tô conseguindo ver aqui? Sei que a image é recebida como parâmetro no Member.js e no Form.js, mas não estou conseguindo compreender o porque da imagem ter parado de exibir. Até pouco tempo atrás, o avatar era exibido direitinho, agora só fica aparecendo o conteúdo do alt...

Outra questão é como o nome, de repente, passou a ser exibido ao lado do cargo, mas talvez tenha mais relação com o avatar não ser exibido tbm. E isso é mais CSS, então posso resolver com mais calma depois, sem mta dor de cabeça nesse ponto, pelo menos...

Brigadão pelos retornos!

É, infelizmente, não consegui encontrar o problema que tá impedindo a imagem de ser carregada e nem qual o problema do CSS...

Se puder me dar alguma luz pra finalizar o projeto e subir no Vercel, agradeço muito!

Acabei de dar uma atualizada no projeto aqui: https://github.com/f-f-l/organo

Salve!

Olha, no seu componente Squad.js, na linha 18:

avatar={props.avatar}

Seguindo a sua estrutura de código, deveria ser:

image={member.image}

Porque cada member possui uma propriedade chamada image que você definiu no Form.js, e ela é diferente para cada item da lista (por isso props.avatar não funciona). Além disso, no seu componente Member.js, você espera uma prop chamada image e não uma prop chamada avatar.

:D

Caramba, tinha esquecido completamente que havia alterado image pra avatar e que depois voltei pra image. Eu olhava, ollhava de novo e achava que tava certo por ter associado um ao outro...

Agora foi!

Mas ainda ficou esse problema da cor do fundo da imagem/avatar que, por alguma razão, tbm não sai do cinza. Não é estranho? Defini a cor como props.primaryColor e só funciona na constant borderColor, ambos em Squad.js. Não deveria estar pegando o valor, já que recebem o msm parametro?

Ficou faltando passar essa prop (bgColor={props.primaryColor}) para o <Member />:

          <Member
            key={member.name}
            name={member.name}
            role={member.role}
            image={member.image}
            bgColor={props.primaryColor}
            avatarBackgroundColor={avatarBgColor}
          />

Fiquei um pouco confuso qnd bati o olho, mas deixa eu conferir se entendi direitinho:

Em Member.js, o header do card recebe a cor como parâmetro de Squad.js (que, por sua vez, recebe seu valor como parâmetro de App,js), certo?

Percebi que bateu uma confusão pelo fato de eu ter criado duas bgColor. Dps que alterei uma pra imageHeaderBgColor, a coisa toda ficou um pouco mais tranquila de compreender.

Exatamente isso!

Passar essas props de um componente pra outro, de pai pra filho, é uma cena conhecida e tem até nome: Prop Drilling

Se liga nesse artigo

Vou ler aqui! Brigadão!

Chegou a ver o que pode estar gerando o problema no layout do card?

Tava dando uma olhada e a estilização do Member.css tá igual ao do Colaborador.css

Vou dar uma alterada no layout da página dps, mas considerava manter como está nos cards. Só que, antes de começar as alterações, queria entender o problema de não estar ficando como o seu