Problemas com o map na lista suspensa

Oi, Andressa!

Uma das formas de lidar com o .map na Lista Suspensa é:

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

E, analisando a mensagem de erro, ele está dizendo que está lendo .map de undefined. Isso quer dizer que faltou passar a prop dos itens. Como você está utilizando esse componente no Formulário? Nesse caso, temos de passar a lista de itens, de acordo com a implementação.

Primeiro, podemos criar a lista de times num array:

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

E depois passamos para a ListaSuspensa:

                <ListaSuspensa obrigatorio={true} label="Time" itens={times}/>

O Formulario completo fica assim:

import Botao from '../Botao'
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'
    ]

    const aoSalvar = (evento) => {
        evento.preventDefault()
        console.log('Form foi submetido')
    }

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

export default Formulario