Aparece a mensagem Compiled with problems, onde o ´props.aoAlterado não é uma função
import './CampoTexto.css'
import {useState} from 'react'
const CampoTexto = (props) => {
const aoDigitar = (evento) => {
props.aoAlterado(evento.target.value)
}
return (
<div className="campo-texto">
<label>{props.label}</label>
<input value={props.valor} onChange={aoDigitar} required={props.obrigatorio} placeholder={props.placeholder}/>
</div>
)
}
export default CampoTexto
import "./Formulario.css"
import CampoTexto from "../CampoTexto"
import ListaSuspensa from "../ListaSuspensa";
import Botao from "../Botao";
import { useState } from "react";
const Formulario = () => {
const equipes = [
'Front-End',
'Back-End',
'Banco de dados',
'DevOps'
]
const [nome, setNome] = useState('')
const [cargo, setCargo] = useState('')
const [imagem, setImagem] = useState('')
const aoSalvar = (evento) => {
evento.preventDefault()
console.log("O form foi submetido", nome, cargo, imagem)
}
return (
<section className="formulario">
<form onSubmit={aoSalvar}>
<h2>Preencha as informações para criar o card dos integrantes.</h2>
<CampoTexto
obrigatorio={true}
label="Nome"
placeholder="Digite o seu nome"
valor={nome}
aoALterado={valor => setNome(valor)}
/>
<CampoTexto
obrigatorio={true}
label="Cargo"
placeholder="Digite o seu cargo"
valor={cargo}
aoALterado={valor => setCargo(valor)}
/>
<CampoTexto
abel="Imagem"
placeholder="Digite o endereço da imagem"
valor={imagem}
aoAlterado={valor => setImagem(valor)}
/>
<ListaSuspensa obrigatorio={true} label="Equipe" itens={equipes}/>
<Botao>
Criar card
</Botao>
</form>
</section>
)
}
export default Formulario;