Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

A tela fica branca mesmo tudo estando compilado com sucesso

Fiz os cod da forma que está na aula, seguindo as instruções e analisando cada tag, mas, a pag não carrega com o projeto. Fica em branco

import './ListaSuspensa.css'

const ListaSuspensa = (props) => {
    return (
        <div>
            <label>{props.label}</label>
                <select>
                    {props.itens.map(item => {
                        return <option key={item}>{item}</option>
                    })}
                </select>
        </div>
    )



}

export default ListaSuspensa
import CampoTexto from '../CampoTexto';
import ListaSuspensa from '../ListaSuspensa';
import './Form.css'

const Form = () => {
    const times = [
        'Duelistas',
        'Iniciadores',
        'Controladores',
        'Sentinela'
    ]
    return (
        <section className='formulario'>
            <form>
                <h2> Preencha os dados para criar o card do Valorant</h2>
                <CampoTexto label ='Nome' placeholder ='Digite seu nome'/>        
                <CampoTexto label ='Função' placeholder ='Digite sua função'/>
                <CampoTexto label ='Imagem' placeholder ='Mande sua imagem'/>
                <ListaSuspensa label = 'Posição' placeholder = 'Escolha sua posição' item = {times}/>
            </form>
        </section>
    )
}

export default Form
4 respostas

Salve, Isaqui!

Consegue abrir as ferramentas do desenvolvedor do chrome?

Vamos procurar uma pista no console!

O caminho na barra de ferramentas é algo parecido com:

  1. Visualizar
  2. Desenvolvedor
  3. Ferramentas do desenvolvedor

O console me retorna as seguintes informações:

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

solução!

Repara, Isaqui, que ele disse que não conseguiu fazer .map de undefined. Isso quer dizer que a prop chamada itens não foi passada corretamente. Olhando pro código que você me mandou eu percebi o seguinte:

                <ListaSuspensa label = 'Posição' placeholder = 'Escolha sua posição' item = {times}/>

A passagem de prop item = {times} deveria ser itens = {times}. Percebeu a diferença?

É comum esse tipo de coisa acontecer, e nesse cenário o console vai ser sempre nosso melhor amigo :)

entendi perfeitamente, muito obrigado pela atenção.