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

useState[' '] is undefined

Vi no fórum que aconteceu com outras pessoas mas nenhuma das soluções deu certo comigo.

Formulario

import { useState } from 'react'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

const Formulario = () => {
    const [nome, setNome] = useState['']
    const [cargo, setCargo] = useState['']
    const [imagem, setImagem] = useState['']

    const aoSalvar = (evento) => {
        evento.preventDefault()
        console.log('Form foi submetido => ', nome, cargo, imagem)
    }

    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 
                    obrigatorio={true} 
                    label="Imagem" 
                    placeholder="Informe o endereço da imagem"
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)} 
                />
                <ListaSuspensa />
                <Botao>
                    Criar Card    
                </Botao>
            </form>
        </section>
    )
}

export default Formulario

CampoTexto

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


const CampoTexto = (props) => {

    const placeholderModificada = `${props.placeholder}`

    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={placeholderModificada}/>
        </div>
    )
}

export default CampoTexto
2 respostas
solução!

Bom dia Giulio, pelo que entendi de acordo com seu código, você esta tentando criar um estado, porém esse estado seria uma string, logo, seria apenas colocar: const [nome, setNome] = useState('') const [cargo, setCargo] = useState('') const [imagem, setImagem] = useState('')

ou seja, você colocar [] ao inves de ()

Consegui resolver mas agora aparece outro erro e acredito que seja na ListaSuspensa:

import './ListaSuspensa.css'

const ListaSuspensa = (props) => { return (

{props.label} <select onChange={evento => props.aoAlterado(evento.target.value)} required={props.required} value={props.value}> {props.itens.map(item => { return {item}
  • })}
  • ) }

    export default ListaSuspensa