How To Use State in React with TypeScript.

The post aims to explain 

• What is state in react?
• Why do we need state in react?
• How do we use state in react?

What is state in react?

GeekforGeeks explains the state as

The State is an instance of React Component Class that can be defined as an object of a set of observable properties that control the behavior of the component. 

Why do we need state in react?

We need state in react because it holds some information that may change over the lifetime of the component. State is very important because it re-renders the component whenever the value changes.  JavaScript or TypeScript Variables do not.

We would be using functional components here and with React Hooks.  Reactjs.org explains Hook as

Hook is a special function that lets you “hook into” React features. For example useState, which we would use to manage states in this blog post lets you add React state to function components.

Prerequisites.

• Knowledge of JavaScript and TypeScript.
• Knowledge of React.
• Nodejs and yarn.
• Visual Studio.

First Step:  Set up create-react-app

To follow this blog post, let’s create a create-react-app template that provides a template to work with the react application.

npx create-react-app --template typescript new-note-input 

We would use a simple note taking app to show how state management works in react. The note-taking app has a list that updates every time we add a note to the input field. 

Second Step: Using useState Hooks

Let’s import react, changeEvent and useState from React.

/**  Add the import for react, changeEvent
 *   The useState Method is the react hook that allows you to
 *   use state in functional component.
*/
import React, { ChangeEvent, useState } from 'react'

Add the functional components that contains the input field and the button to add notes

function App(){
    return(
        <div>
            <div className="input-section">
                <input
                    type="text"
                    name="note"
                    placeholder="Note"
                />
                <button>Add String</button>
            </div>
            
        </div>
    )
}

export default App;

Inside the function component we would add the line of code that initializes the  useState method with two variables one for adding a single note and a setNote method for setting the states.

Then we would add another line of codes that also initializes the useState method with two variables one for adding an array of notes and the other setNotes method for setting the state.

    // The note variables here represents the state and the setNote method represents 
    //  the method for adding states
    const [note, setNote] = useState("")
    
    // The notes is an array and the setNotes is represents how the method for adding array
    // Notice the syntax for useState method.     
    const [notes, setNotes] = useState<string[]>([])

The we need to create a list tag to hold the values of the note generated from the input field. We alson need to map the notes array to the list tag.

return(
        <div>
            <div className="input-section">
                <input
                    type="text"
                    name="note"
                    placeholder="Note"
                />
                <button>Add String</button>
            </div>
            <hr/>
            <ul>
                {
                    notes.map((note) => 
                            <li key={note} >{note}</li>
                    )
                }
            </ul>
        </div>
    

Then add the two methods for updateNote() and populateArray(). The first method is meant to update the note based on changes from the input field value. The second method is to populate the array.

const updateNote = () =>{
    
}

function populateArray(){
        
}

Fill the method to updateNote with event: ChangeEvent<HTMLInputElement> parameter and inside the updateNote method add the setNote method to set the notes.

const updateNote = (event: ChangeEvent<HTMLInputElement>) =>{
            setNote(event.target.value)
 }

Call the populateArray() method to submit an array of notes and then clear the notes inside the note array.

    function populateArray(){
        setNotes([
            ...notes,
            note
        ])
        setNote("")
    }

Remenber to add the onChange event to the input field to detect changes and the updateNote needed to respond to the changes in value of the input field.

<div className="input-section">
    <input
       onChange={updateNote}
       value={note}
       type="text"
       name="note"
       placeholder="Note"
     />
    <button onClick={populateArray}>Add String</button>
</div>

The output should look like this

Then the final code would also look like this

/**  Add the import for react, changeEvent
 *   The useState Method is the react hook that allows you to
 *   use state in functional component.
*/
import React, { ChangeEvent, useState } from 'react'


function App(){
    // The note variables here represents the state and the setNote method represents 
    //  the method for adding states
    const [note, setNote] = useState("")
    // The notes is an array and the setNotes is represents how the method for adding array
    // Notice the syntax for useState method. 
    
    const [notes, setNotes] = useState<string[]>([])

    const updateNote = (event: ChangeEvent<HTMLInputElement>) =>{
            setNote(event.target.value)
    }

    function populateArray(){
        setNotes([
            ...notes,
            note
        ])
        setNote("")
    }

    return(
        <div>
            <div className="input-section">
                <input
                    onChange={updateNote}
                    value={note}
                    type="text"
                    name="note"
                    placeholder="Note"
                />
                <button onClick={populateArray}>Add String</button>
            </div>
            <hr/>
            <ul>
                {
                    notes.map((note) => 
                            <li key={note} >{note}</li>
                    )
                }
            </ul>
            
        </div>
    )
}

export default App;

The code is hosted on GitHub at https://github.com/iamAbayomi/usestate-react 

References

https://redux.js.org/faq/general

https://www.newline.co/@satansdeer/using-react-redux-with-typescript–6ea90757

https://proxify.io/nl/articles/using-redux-with-react