Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] aoAlterado não é uma função

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;

1 resposta
solução!

em CampoTexto você esta acessando: "aoAlterado" em Formulario você está colocando: "aoALterado" como prop de CampoTexto

esse L maisculo nos CampoTexto que está está causando o erro, deixe nos dois arquivos com "l" minusculo: aoAlterado