UseState Hook

UseState hook allows us to manage our application's state

UseState Hook Intro

Our application's way of managing state. We can initialize state by passing our initial state as an argument to the useState hook.

App.js

import React, {useState} from "react"

function App(){
    // Array Destructuring to Avoid Grabbing State's Value with Index Number
    const [answer] = useState("Yes")
    
    return(
        <div>
        <h1>Is state necessary? {answer} </h1>
        </div>
    )
}
export default App

index.js

Changing State with UseState Hook

We can change component's initial state with the function provided by useState hook.

App.js

function App(){
    // Initializing state of 'count' with a value (0) & passing 'setCount' function  
    const [count, setCount] = useState(0)
    
    // increment function
    function increment(){
        // prevCount (is basically prevState) reserves the previous state of component
        setCount(prevCount => prevCount + 1)
    }
    
    // decrement function
    function decrement(){
        setCount(prevCount => prevCount - 1)
    }
    
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>Increment!</button>
            <button onClick={decrement}>Decrement!</button>
        </div>
    )
    
}

export default App

index.js

useState() is an array with 2 elements - a value & a function

Changing More Complex State with UseState Hook

It's an ideal approach to use useState hook multiple times for different data types.

App.js

import React, {useState} from "react"

function App() {
    // Initializing input data state. 'value' will be stored in object
    const [inputData, setInputData] = useState({firstName: "", lastName: ""})
    // Initializing contact data state. 'value' will be stored in array
    const [contactsData, setContactsData] = useState([])
    
    // handleChange function collects input data
    function handleChange(event) {
        const {name, value} = event.target
        setInputData(prevInputData => ({...prevInputData, [name]: value}))
    }
    
    // handleChange function saves input data
    function handleSubmit(event) {
        event.preventDefault()
        setContactsData(prevContacts => [...prevContacts, inputData])
    }
    
    // Mapping saved data which are stored in array
    const contacts = contactsData.map(contact => <h2 key={contact.firstName + contact.lastName}>{contact.firstName} {contact.lastName}</h2>)
    
    return (
            <form onSubmit={handleSubmit}>
                <input 
                    placeholder="First Name"
                    name="firstName" 
                    value={inputData.firstName}
                    onChange={handleChange}
                />
                <input 
                    placeholder="Last Name"
                    name="lastName" 
                    value={inputData.lastName}
                    onChange={handleChange}
                />
                <br />
                <button>Add contact</button>
            </form>
            {contacts}
        </>
    )
}

export default App

index.js