Compilado com problemas: × ERRO props.aoColaboradorCadastrado não é uma função TypeError: props.aoColaboradorCadastrado não é uma função na aoSalvar (http://localhost:3000/static/js/bundle.js:410:11) em HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11208:18) em Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11252:20) em invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11309:35) em invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:11323:29) em executeDispatch (http://localhost:3000/static/js/bundle.js:15467:7) em processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:15493:11) em processDispatchQueue (http://localhost:3000/static/js/bundle.js:15504:9) em dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:15513:7) na http://localhost:3000/static/js/bundle.js:15673:16 ERRO

import { useState } from 'react';
import Banner from './componentes/Banner';
import Formulario from './componentes/Formulario';

function App() {

  const [colaboradores, setColaboradores] = useState([])

  const aoNovoColaboradorAdicionado = (colaborador) => {
    console.log(colaborador)
    setColaboradores([...colaboradores, colaborador])

  }

  return (
    <div className="App">
      <Banner />
      <Formulario aoColoboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>
    </div>
  );
}

export default App;

import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
import { useState } from 'react'
const Formulario = (props) => {


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

    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado({
            nome,
            cargo,
            imagem,
            time
        })


    }

    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"
                    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="Digite o endereço da imagem"
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)}
                  />
                 <ListaSuspensa 
                    obrigatorio={true} 
                    label="Time"
                    itens={times}  
                    valor={time}
                    aoAlterado={valor => setTime(valor)} 
                    />   
                    <Botao>
                        Criar Card
                    </Botao>

            </form>
        </section>
    )
}

export default Formulario