Forem: Mayank Kashyap

Multiple Checkbox Form in React Js

Mayank Kashyap — Sun, 25 Dec 2022 14:15:44 +0000

Multiple Checkbox list is very often seen on the websites like Amazon, Flipkart etc.

So today we are going to build multiple checkbox list from scratch using React.
So, our final result will look like the gif below

This is App.js, make a React project and you will find it over there.
You can create a separate file for the Checkbox list or simple write your code in the App.js but I prefer to create a new file for Checkbox list. Import the Checkbox from the File Checkbox.js and make it a component. Styling is up to you. You can style it anyway you want.

import "./styles.css";
import Checkbox from "./Checkbox";

export default function App() {
  return (
    <div className="App">
      <Checkbox />
    </div>
  );
}

This is our Checkbox.js

import React from "react";

const Checkbox = () => {

  const list = [
    "checkbox1",
    "checkbox2",
    "checkbox3",
    "checkbox4",
    "checkbox5"
  ];

  return (
    <div
      className="selector-bg"
      style={{ background: "aliceblue", height: "100vh", margin: "20px" }}
    >
      <div>
        <h1
          style={{
            textAlign: "center",
            fontWeight: "bold",
            textTransform: "uppercase",
            fontSize: "20px"
          }}
        >
          Select List
        </h1>
        <form>
          <div style={{ padding: "20px" }}>
            {list.map((val) => (
              <div
                style={{
                  display: "flex",
                  backgroundColor: "yellowgreen",
                  padding: "10px",
                  margin: "12px"
                }}
                key={val}
              >
                <input
                  type="checkbox"
                  id={val}
                  value={val}
                  name={val}
                  style={{ marginRight: "10px" }}
                />
                <label for={val}>{val}</label>
              </div>
            ))}
          </div>
        </form>
      </div>
    </div>
  );
};

export default Checkbox;

So in the Checkbox.js we have firstly made the list of all the tags which we want to display and to keep everything simple I have named them checkbox1, checkbox2, checkbox3 and so on you can also replace them with some real tags like brand names, color names or whatever you like.

const list = [ "checkbox1", "checkbox2", "checkbox3", "checkbox4", "checkbox5"];

we are making this list so that we don't need to hardcode tags and write repetitive code, instead of that we can simply use map on the list of the tags and display them by writing code once.

<div className="selector-bg" style={{ background: "aliceblue", height: "100vh", margin: "20px" }} > <div> <h1 style={{ textAlign: "center", fontWeight: "bold", textTransform: "uppercase", fontSize: "20px" }} > Select List </h1> <form> <div style={{ padding: "20px" }}> {list.map((val) => ( <div style={{ display: "flex", backgroundColor: "yellowgreen", padding: "10px", margin: "12px" }} key={val} > <input type="checkbox" id={val} value={val} name={val} style={{ marginRight: "10px" }} /> <label for={val}>{val}</label> </div> ))} </div> </form> </div>

In the code written above we have only done some styling and created a form, iterated over the list of tags and displayed them. After all this we will get the output something like the image below.

Now, lets add state and add logic to make things work

Import useState() from React

import {useState} from 'react'

A). Add a state checked to keep track of all the tags which are checked.
const [checked, setChecked] = useState([]);

B). Add onChange Event handler on the input field
onChange={() => handleToggle(val)}

C). Write the logic for the handleToggle function, so that whenever a box is checked or unchecked the handleToggle function get triggered.

const handleToggle = (val) => {
    var currentIndex = checked.indexOf(val);
    var newArr = [...checked];

    if (currentIndex === -1) {
      newArr.push(val);
    } else {
      newArr.splice(currentIndex, 1);
    }

    setChecked(newArr);
  };

Handle Toggle function doing following things
1). It is finding the index of the tag in the checked array,
if the tag is present then we will get the index, otherwise we will get -1
2). we are creating another array newArray and initializing it with all the tags which are currently in the checked array, in simple words we are making copy.
3). If the currentIndex is -1, it means the tag is not present in the array so we are pushing it in the newArr by using push() method.
4). If the currentIndex is not equal to -1 it means the tag is already checked thus present in the checked array, so we are removing it using splice() method.
5). At last we are setting the checked array using setChecked(newArr);

To display all the checked tags we are adding another div which get diplayed only when the size of checked array is greater than 0 means the checked array is having atleast one element

 <div style={{ display: "flex", backgroundColor: "gray" }}>
        {checked.map((item) => (
          <p
            key={item}
            style={{
              margin: "10px",
              color: "whitesmoke",
              border: "2px solid greenyellow",
              padding: "2px"
            }}
          >
            {item}
          </p>
        ))}
      </div>

The link for the final code of Checkbox.js
https://github.com/MaYaNkKashyap681/React-Native-Features-Implementation/blob/main/Selection%20Checkbox%20in%20React.js

Pagination Concept using JavaScript

Mayank Kashyap — Thu, 22 Dec 2022 20:01:32 +0000

Pagination is basically dividing the entire data into parts of some specific size and showing one part or set of data on one page. To view other set of data we simply change the page.

For Example:
Let say we have a website which shows information of the users.
So, when we make an API request we get data of all the users, if we display all the users data on single page then it is not a good practice thus we use pagination in which we display fixed numbers of users on one page and if we want to see other users the we change the page.

Types of Paginations
There are two ways to do pagination
1). At Client Side -> The example above is client side pagination. In client side pagination we fetch all the data from the server and put pagination logic on client side. But if the dataset is very large then we require large space to store it.

2). At Server Side ->
In server side pagination we put the logic of pagination on the server side and get fixed amount of data from the server itself for every page, but the main issue with server side pagination is calling an API for every page change.

In this blog we look the concept of pagination using Javascript.

Let say we have an array of 20 items
data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].
consider this data array the data which we are getting form the Api [Client Side] or the data which is stored in the database[Server Side].

we will try to understand the logic of pagination using this data array.
For pagination we need to have some variables
a). total_no_of_items -> It refers to total number of items, which in this case is 20 [data.length = 20].
b). items_per_page -> Items which we want to be displayed on one page, let say we want 5 items per page.
c). no_of_pages -> It refers in how many pages we can divide our entire data.

In this case

no_of_pages = total_no_of_items / items_per_page
[20 / 5 = 4]
no_of_pages = 4

d). page_number -> The page number which we are currently on.

These are the items which a particular page number will have for the above case

Page 1 -> [1 - 5]
Page 2 -> [6 - 10]
Page 3 -> [11 - 15]
Page 4 -> [16 - 20]

If we are on page_number 3, so we have [11 - 15] displayed.
Let's look at the logic
items_to_skip = (page_number - 1) * items_per_page
[(3 - 1)*5 = 10]
Thus we need to skip 10 items, and we have to show 5 items per page.
So we can do,
items = data.slice(items_to_skip, items_to_skip + items_per_page)
items array will have the items numbered from [11 - 15].

Code

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const total_no_of_items = data.length;
const items_per_page = 5;
let no_of_pages = total_no_of_items / items_per_page;
let page_number = 3;

const items_to_skip = (page_number - 1) * items_per_page;
const items = data.slice(items_to_skip, items_per_page + items_to_skip);
console.log(items)

Output

[11, 12, 13, 14, 15]

Promises and Asynchronous Javascript - Part 1

Mayank Kashyap — Wed, 21 Dec 2022 21:11:40 +0000

As we know Javascript is Single Threaded programming language, it means the code is executed line by line and one after another.
Thus, we can say javascript is Synchronous in nature.

Asynchronous javascript enables us to run the tasks which do not take much time and keeping the tasks aside which take much longer time for there execution, because of this technique we don't have to wait for the tasks which require more time for there execution and stopping the program at same point till the execution of that that function is not over, instead we run the other tasks without stopping the program at single point.

Now let's see some code examples to understand nature of javascript in detail.

console.log("Hi)
console.log("How are you?")
console.log("Bye)

The Output of the code above is

Hi
How are you?
Bye

Same code using setTimeout().

console.log("Hi)
setTimeout(()=>{
console.log("How are you?")
},1000);
console.log("Bye)

Now the output will be

Hi
Bye
How are you?

Now this may seems little confusing to you, is it?

Lets find out why we are getting this output

So we are using setTimeout() function in the code above, setTimeout() is a function which we get from the browser's webApi.
Whatever is written inside the setTimeout() function is executed after the milli seconds which we mention in it.

setTimeout(() => {console.log("Hello")}, 1000);

If you run the code above then Hello will be printed on the console after 1000ms or 1s [1000ms = 1s].

Let's see one more code example

function myName(name) {
setTimeout(() => {
return "My name is" + name;
}, 1000)
}
console.log("Hi)
const _name = myName("John");
console.log(_name);
console.log("Bye)

The Output of the above code is

Hi
undefined
Bye

Now you may think why we are getting undefined yes?
we are using setTimeout() inside the myName() function thus the myName() function will return My name is John after 1s.
and as we know GEC is created inside the javascipt which maps all the variables initially to undefined in the memory allocation phase and assign values to them in the code execution phase when the line in which the value is assigned to the variable in the code is encountered. Thus initially the variable _name is undefined and after 1s it get the value My name is John but due to synchronous nature of javascript undefined is printed on the console.

This is end of the Part-1, I hope you got an idea about the nature of the javascript and what is the issue with synchronous nature of the javascript, we will learn about callbacks and promises in javascript in part-2.