Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Página não funciona ao usar o "MAP" | AJUDA POR FAVOR

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Trabalhando com props e atividade Lista dos times

por Evelyn Carolina Leite Silva
| 4.8k xp | 3 posts

Olá! Estou com problemas ao exportar a arquivo "Lista Suspensa" para dentro do "Formulário". No compilador não indica nenhum erro, porém no console da web aparece vários erros e a página não funciona.

GitHub do projeto

Código da minha lista suspensa = dropdown

import './Dropdown.css'

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

export default Dropdown

Código do meu formulário = form 

import Dropdown from '../Dropdown/Dropdown';
import FieldText from '../FieldText';
import './Form.css'

const Form = () => {
    return(
        <section className='form'>
            <form>
               <h2>Preencha os dados para criar o card do seu Personagem!</h2>
                <FieldText label="Nome do personagem" placeholder="Digite o nome do personagem..."/>
                <FieldText label="Game" placeholder="Digite o nome do game..."/>
                <FieldText label="Imagem do personagem" placeholder="URL da imagem"/>
                <Dropdown/>
            </form>
        </section>
    )
}

export default Form;

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

2 respostas
solução!
por Vinicios Neves
| 1001.4k xp | 1104 posts
Instrutor Tech Lead | Tech Educator

Oi, Evelyn!

Faltou passar os itens para a sua Dropdown. Repara que no seu erro ele diz "Não consigo ler propriedades deundefined (lendo 'map')". No casso, é essa linha que está lançando o erro:

props.itens.map(item =>{return <option>{item}</option>})

Faltou passar a prop itens para o componente de lista suspensa, assim: <Dropdown itens={times} />.

O código final fica mais ou menos assim:

import Dropdown from '../Dropdown/Dropdown';
import FieldText from '../FieldText';
import './Form.css'

const Form = () => {
    const times = [
        'Programação',
        'Front-End',
        'Data Science',
        'Devops',
        'UX e Design',
        'Mobile',
        'Inovação e Gestão'
    ]
    return(
        <section className='form'>
            <form>
               <h2>Preencha os dados para criar o card do seu Personagem!</h2>
                <FieldText label="Nome do personagem" placeholder="Digite o nome do personagem..."/>
                <FieldText label="Game" placeholder="Digite o nome do game..."/>
                <FieldText label="Imagem do personagem" placeholder="URL da imagem"/>
                <Dropdown itens={times} />
            </form>
        </section>
    )
}

export default Form;
por Evelyn Carolina Leite Silva
| 4.8k xp | 3 posts

Instrutor Vinicios MUITO OBRIGADA! Eu pensei que era algo que tinha feito errado, mas funcionou certinho.