Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

useState is not defined

estou com um erro que diz "useState is not defined".

import { useState } from 'react'
import './campoTexto.css'

const CampoTexto = (props) => {

    const aoDigitado = (evento) => {
       props.aoAlterado(evento.target.value)
    }

    return (
        <div className="campo-texto">
            <label>{props.label}</label>
            <input value={props.valor} onChange={aoDigitado} required={props.obrigatorio} placeholder={props.placeholder} />
        </div>
    )
}

export default CampoTexto
import Botao from '../Botao'
import ListaSuspensa from '../ListaSuspensa'
import CampoTexto from '../campoTexto/campoTexto'
import './Formulario.css'

const Formulario = () => {

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


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"
                     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  texto="Criar Card"/>
            </form>
        </section>
    )
}

export default Formulario
2 respostas
solução!

Salve, Guilherme!

Você importou o useState no componente CampoTexto, mas só utilizou esse hook no componente Formulario.

Precisamos então mover o import do useState para esse componente:

import Botao from '../Botao'
import ListaSuspensa from '../ListaSuspensa'
import CampoTexto from '../campoTexto/campoTexto'
import './Formulario.css'

import { useState } from 'react' // mover esse import pra cá :)

Muito obrigado professor, funcionou!