1
resposta

Card não aparece as imagens e textos.

Antes dessa parte do curso, o card com a imagem aparecia direitinho, mas quando eu passei a incluir o props pra deixar de forma dinâmica ele parece vazio sem a imagem e o texto.

O console chegou a até me avisar que faltava a key, incluí ela pra ver se era isso que faltava mas não, segue não aparecendo nada, fiquei até agora vendo o que poderia ser o problema e parei na parte onde desestruturam o props pra {nome, imagem, cargo}.

A pasta do Organo: https://drive.google.com/file/d/1k2kZZQDI9cMnExpRY6UoYNxMqSInZ9Mh/view?usp=sharing

1 resposta

Oi, Nicholas, tudo bem?

O problema no seu código acontece no componente Formulario. Na criação das constantes com as listas do useState, o primeiro valor que representa o estado atual foi escrito com letra maiúscula e no restante do código usado com letra minúscula:

const [Nome, setNome] = useState('')
const [Cargo, setCargo] = useState('')
const [Imagem, setImagem] = useState('')
const [Time, setTime] = useState('')

O valor Nome, Cargo, Imagem e Time tinham sua inicial maiúscula. Para ajustar e fazer com que a criação dos cards inclua as informações, é preciso alterar para letra minúscula.

A correção ficaria assim:

import { useState } from 'react';
import Botao from '../Botão';
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa';
import './Formulario.css'

const Formulario = (props) => {

    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')

    const salvando = (e) => {
        e.preventDefault()
        props.aoCadastrado({
            nome,
            cargo,
            imagem,
            time
        })
    }

    return (

        <section className='Formulario'>
            <form onSubmit={salvando}>
                <h2>Preencha os dados para criar o card do colaborador.</h2>
                <CampoTexto
                    label="Nome"
                    obrigatorio={true}
                    placeholder="Digite seu nome"
                    valor={nome}
                    alterado={valor => setNome(valor)}
                />
                <CampoTexto
                    label="Cargo"
                    obrigatorio={true}
                    placeholder="Digite seu cargo"
                    valor={cargo}
                    alterado={valor => setCargo(valor)}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Informe o endereço da imagem"
                    valor={imagem}
                    alterado={valor => setImagem(valor)}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Time"
                    itens={props.times}
                    valor={time}
                    alterado={valor => setTime(valor)}
                />
                <Botao>
                    Criar card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario;

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software