useState example from React Hooks

ComponentWithUseState.js

import React, { useState } from "react";

function ComponentWithUseState() {
  //states independentes
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  
  //único state com várias propriedades
  const [address, setAddress] = useState({street: '', city: ''})
  
  const onChangeNameHandler = (event) => {
    const {target: {value}} = event
    setName(value)
  }
  
  const onChangeAgeHandler = (event) => {
    const {target: {value}} = event
    setAge(value)
  }
  
  const onChangeAddressHandler = (event) => {
    const {target: {value, name}} = event
    setAddress({...address, [name]: value})
  }
  
  return(
    <form>
      <input value={name} onChange={onChangeNameHandler} />
      <input value={age} onChange={onChangeAgeHandler} />
      <input value={address.street} name="street" onChange={onChangeAddressHandler} />
      <input value={address.city} name="city" onChange={onChangeAddressHandler} />
    </form>
  )
}

export default ComponentWithUseState;