How to use UseState with Array

 Introduction

Previously, we discussed what is useState array and how to use it by updating the state with the setter function. We can use useState and setting any default value with putting value of any datatype which can be primitive or reference datatypes , that is javascript specific and not the react thing.

So , let's start our discussion for how to use useState with Array with an example.
I will also provide you the code Sandbox link later in the blog post , where you can also play with the code and try with yourself.

First Step

First you need to create the react app , and import the useState from react by named export. After importing useState from react , you need to set the default value to useState an empty array , because it's the declaration that needed to be done and later the state can update according to default value specified to the useState

Second Step

Now , I have created an example for you in this step so this will clearly fit in your mind and this make your understanding better when working useState with array.

So , in this example a form is there where we will take name and class of the user and as the user submits the form it will display below the form in the representation of table.


Third Step 

Now , we initialize two more states for the name and class. The student name and student class will change by an event onChange that will be triggered whenever the 
user writes in the input field , this form handling and submission will be later covered in the next blog but here we will only concentrate on the functionality of useState with array.

So here the onChange event will triggered and the handleChange will call which then updates the name and class of the student , also we initialize the the studentName and studentClass in the data state, where we store every student data as and object. 


This is form , where we attach our functions whenever user inputs the data in the form , so we handling the form submission and changing of input fields with the state changes.

Fourth Step

In this step, we will set the studentName and studentClass into the data state , when the user submits the form the handleSubmit function will call and the setter function will update the array  with the new student object having name and class as properties of it.

In the useState with array , the react don't provide the automatic merge into the array , we have to do the manual merge of the object into the array by spreading all the values of the array which is object by the help of spread operator and then put the studentName state value and studentClass state value as object into the array, now this will merge the object.

There are two methods of merging object into array . First one is the commented line , which is not best practice to do although it will merge the object but still for performance optimization , the second method is recommended where the function is called and the previous value of the array is remembered, so the react doesn't need to remember the state when calling the component , it can just use the previous value where it can do the comparison and performs the merging.

After merging , we will clear the input fields by setting the empty value in the setter function of studentName state and studentClass state.


Fifth Step

Now we will map out all the data values into the table and display the name and class of student in the web browser. After mapping out all the data , we will also put the button which can clear the data array with the onClick event.



I hope this examples make your understanding better and it can help you when working with useState with array . I will attach the code sandbox link below so you can practice and play with the code.


Thank you for reading the blog post!


















Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more