import { useState } from "react"; import Banner from "./componentes/Banner"; import Formulario from "./componentes/Formulario"; import Rodape from "./componentes/Rodape"; import Time from "./componentes/Time"; import { v4 as uuidv4 } from 'uuid';

function App() {

const [times, setTimes] = useState([ { id: uuidv4(), nome: 'Programação', cor: '#57C278' }, ])

const inicial = [ { id: uuidv4(), nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[0].nome }, ] const [colaboradores, setColaboradores] = useState(inicial)

function deletCollaborator(id) { setColaboradores(colaboradores.filter(colaborador => colaborador.id !== id)); }

function changeTeamColor(color, id) { setTimes(times.map(time => { if (time.id === id) { time.cor = color } return time; })) } function registerTime(newTime) { setTimes([...times, { ...newTime, id: uuidv4() } ]) } return (

import { useState } from 'react' import Botao from '../Botao' 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 [nomeTime, setNomeTime] = useState('')
const [corTime, setCorTime] = useState('')

const aoSubmeter = (evento) => {
    evento.preventDefault()
    console.log('form enviado', nome, cargo, imagem, time)
    props.aoCadastrar({
        nome,
        cargo,
        imagem,
        time,            
    })
}

return (
    <section className="formulario-container">
        <form className="formulario" onSubmit={aoSubmeter}>
            <h2>Preencha os dados para criar o card do colaborador.</h2>
            <CampoTexto
                obrigatorio={true}
                label='Nome'
                placeholder='Digite seu nome '
                valor={nome}
                aoAlterado={valor => setNome(valor)} />
            <CampoTexto
                obrigatorio={true}
                label='Cargo'
                placeholder='Digite seu cargo '
                valor={cargo}
                aoAlterado={valor => setCargo(valor)} />
            <CampoTexto
                label='Imagem'
                placeholder='Informe o endereço da imagem '
                aoAlterado={valor => setImagem(valor)} />
            <ListaSuspensa
                obrigatorio={true}
                label='Times'
                items={props.times}
                valor={time}
                aoAlterado={valor => setTime(valor)} />
            <Botao texto='Criar Card' />
        </form>
        <form className="formulario" onSubmit={(event) => {
            event.preventDefault()
            console.log('forme enviado: ', nomeTime, corTime)
            props.registerTime({
                nomeTime: nomeTime,
                corTime: corTime
            })
            setNomeTime('')
            setCorTime('')
        }}>
            <h2>Preencha os dados para criar um novo time.</h2>
            <CampoTexto
                obrigatorio
                label='Nome do Time'
                placeholder='Digite seu nome do time'
                valor={nomeTime}
                aoAlterado={valor => setNomeTime(valor)}
            />
            <CampoTexto
                obrigatorio
                label='Cor do time'
                placeholder='Digite a cor do time'
                valor={corTime}
                aoAlterado={valor => setCorTime(valor)}
            />
            <Botao texto='Criar Novo Time' />
        </form>
    </section>
)

}

export default Formulario

Bom dia, não consegui ver no seu código a criação da função de registra o time no app.js. Será que você esqueceu de criar?