useState - Mllara/react-project GitHub Wiki

-O useState é um hook do React;

-Com ele consehuimos manusear o estado de um componente de forma simples;

-Este hook funciona muito bem com eventos;

-Podemos atrelar um evento a mudança de state

Quando trabalha com useState, precisa importar primeiro.

Depois cria-se duas constantes: [name, setName]

name: nome atributo que eu vou resgatar/ler

setName: o que eu vou alterar

Na paste Form

import {useState} from 'react'

function Form(){

function cadastrarUsuario(e){

    e.preventDefault()

    console.log(`Usuário' ${name} foi cadastrado com a senha: ${password}`)
   

}

const [name, setName] = useState()

const [password, setPassword] = useState()

return (

    <div>

        <h1>Meu cadastro</h1>

        <form onSubmit={cadastrarUsuario}>

            <div>

                <label htmlFor="name">Nome:</label>

                <input 

                type="text" 

                id="name" 

                placeholder="Digite o seu nome" 

                onChange={(e) => setName(e.target.value)}

                />

            </div>

            <div>

                <label htmlFor="password">Senha:</label>

                <input 

                type="password" 

                id="password" 

                name="password" 

                placeholder="Digite sua senha" 

                onChange={(e) => setPassword(e.target.value)}

                />

            </div>

            <div>

                <input type="submit" value="Cadastrar" />

            </div>

        </form>

    </div>

)

}

export default Form

⚠️ **GitHub.com Fallback** ⚠️