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

Lista de times

Acontece um erro na lista de times, tentei de algumas formas e não consegui resolver. Segue imagem e códigos:

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

import Banner from './componentes/banner/banner';
import Formulario from './componentes/formulario';


function App() {
  return (
    <div className='App'>
      <Banner />
      <Formulario />
    </div>
  );
}

export default App;
import CampoTexto from '../CampoTexto';
import ListaSuspensa from '../ListaSuspensa';
import './formulario.css'

const Formulario = () => {

    const times = {
        'Programação',
        'Front-End',
        'Data Science',
        'Devops',
        'UX e Design',
        'Mobile',
        'Inovação e Gestão',
    }

    return (
        <section className='formulario'>
            <form>
                <h2>Preencha os dados para criar o card do colaborador:</h2>
                <CampoTexto label="Nome" placeholder="Digite seu nome" />
                <CampoTexto label="Cargo" placeholder="Digite seu cargo" />
                <CampoTexto label="Imagem" placeholder="Digite o endereço da imagem"/>
                <ListaSuspensa label="Time" itens={times} />
            </form>
        </section>
    )
}

export default Formulario
import './ListaSuspensa.css'

const ListaSuspensa = (props) => {
    console.log(props.itens)

    return (
        <div className='lista-suspensa'>
            <label>{props.label}</label>
            <select>
                {props.itens.map(item => 
                    { return <option key={item}>{item}</option>})}
            </select>
        </div>
    )
}

export default ListaSuspensa
3 respostas
solução!

Oi, Ana!

o problema esta aqui:

const times = {
        'Programação',
        'Front-End',
        'Data Science',
        'Devops',
        'UX e Design',
        'Mobile',
        'Inovação e Gestão',
    }

Não são chaves, são parenteses;

const times = [
        'Programação',
        'Front-End',
        'Data Science',
        'Devops',
        'UX e Design',
        'Mobile',
        'Inovação e Gestão',
    ]

Muito obrigada! Está tudo certinho:)

Se precisar de qualquer coisa, é só postar por aqui :)