Forem: Shraddha Gupta

Pagination in React

Shraddha Gupta — Fri, 10 Jun 2022 18:10:40 +0000

While designing any website we need to think about how should we display our data, such that our users can consume it properly and are not overwhelmed by it. The more organised the data, the better the website's user experience.

Pagination is one such method for achieving this. It is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner.

In this blog we are going to make a simple react app where we will fetch data from this https://jsonplaceholder.typicode.com/posts API and display it in Pagination format.

Here we will be fetching all the data at once and then display it in pages, but with a backend you can fetch small chunks of data for each page, the frontend pagination code for both the methods will remain the same.

Setting up files
Writing code to fetch data
Writing the Pagination Component
Putting the whole code together

Let's get started!

1. Setting up files

Create a react app by using the create react app template

npx create-react-app pagination-app

or you can also code on codesandbox or stackblitz

After the app is created, your folder structure might look like this

2. Writing code to fetch data

We will use the fetch API to get the data from the jsonplaceholder API and store it in a state. Remove all the code from your App.js file and write the code given below

import { useState } from "react";

const URL = "https://jsonplaceholder.typicode.com/posts";

function App() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch(URL)
      .then((response) => {
        if (response.ok) return response.json();
        throw new Error("could not fetch posts");
      })
      .then((posts) => setPosts(posts))
      .catch((error) => console.error(error));
  },[]);
  return <div className="App"></div>;
}

export default App;

Here, we have written the fetch function inside useEffect hook and passed an empty dependency array, this will make sure that our fetch function runs only once, after the page is loaded. If the data is fetched successfully, it will be stored in the state, else the error will be displayed in the console.

If you wish to understand more about how fetch works, you can read my blog Fetch API: Basics

3. Writing the Pagination Component

Now, after getting the data, we will write our Pagination Component.

Create a file Pagination.js in your src folder.
We will display 5 posts per page, and that will be our page limit. We will store the current page number in a state and update it using the Previous and Next button, also we will display 3 consecutive page numbers, viz previous, current and next.

import React, { useState, useEffect } from "react";

const Pagination = ({ pageDataLimit, posts }) => {
  const [currPageNo, setCurrPageNo] = useState(1);
  const [currPagePosts, setCurrPagePosts] = useState([]);
  const [pageNumberGroup, setPageNumberGroup] = useState([]);

  useEffect(() => {
    setCurrPagePosts(getPageData());
    setPageNumberGroup(getPageNumberGroup());
    console.log("run");
  }, [posts, currPageNo]);

  const nextPage = () => setCurrPageNo((prev) => prev + 1);
  const previousPage = () => setCurrPageNo((prev) => prev - 1);
  const changePageTo = (pageNumber) => setCurrPageNo(pageNumber);
  const getPageData = () => {
    const startIndex = currPageNo * pageDataLimit - pageDataLimit;
    const endIndex = startIndex + pageDataLimit;
    return posts.slice(startIndex, endIndex);
  };
   const getPageNumberGroup = () => {
    let start = Math.floor((currPageNo - 1) / 3) * 3;
    console.log(new Array(3).fill(" ").map((_, index) => start + index + 1));
    return new Array(3).fill(" ").map((_, index) => start + index + 1);
  };
return (
    <div></div>
  );
};

export { Pagination };

Here, our pagination component is getting posts and page limit as props. The getPageData funtion will be used to calculate the posts to be shown in each page. Using the start and end index we will slice the posts array and update the currPagePosts state.
The getPageNumberGroup function is used to display the previous, current and the next page numbers.

Now, we will map over the currPagePosts and pageNumberGroup states to display the posts.

return (
    <div>
      <h1 className="heading">Posts in Pagination</h1>
      <ul className="posts-container list-style-none">
        {currPagePosts.map(({ id, title, body }) => {
          return (
            <li key={id} className="post">
              <h3>{title}</h3>
              <p>{body}</p>
            </li>
          );
        })}
      </ul>
      <div className="page-num-container">
        <button
          className={`page-change-btn ${currPageNo === 1 ? "disabled" : ""}  `}
          disabled={currPageNo === 1}
          onClick={previousPage}
        >
          Previous
        </button>
        <ul className="page-num-container list-style-none">
          {pageNumberGroup.map((value, index) => {
            return (
              <li
                className={`page-number ${
                  currPageNo === value ? "active" : ""
                } `}
                key={index}
                onClick={() => changePageTo(value)}
              >
                {value}
              </li>
            );
          })}
        </ul>
        <button
          disabled={currPageNo === Math.floor(posts.length / pageDataLimit)}
          className={`page-change-btn ${
            currPageNo === Math.floor(posts.length / pageDataLimit)
              ? "disabled"
              : ""
          }  `}
          onClick={nextPage}
        >
          Next
        </button>
      </div>
    </div>

We are first displaying all the posts, below that the page numbers along with the buttons. The previous button will be disabled when we are on the first page and similarly the next button will be disabled when we are at the last page.

Below are the styles for the pagination component. Write the code in App.css file and import it in Pagination.js file.

.heading {
  text-align: center;
  margin: 1rem;
}

.posts-container {
  display: grid;
  grid-template-columns: 18rem 18rem 18rem;
  gap: 1rem;
  align-items: stretch;
  justify-content: center;
}

.post {
  max-width: 16rem;
  text-align: center;
  padding: 1rem;
  margin: 0.5rem;
  color: "#c4c4c4";
  border: 1px solid purple;
  border-radius: 0.25rem;
}

.page-num-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-change-btn {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border: none;
  border-radius: 0.25rem;
  outline: none;
  background-color: purple;
  color: white;
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
  background-color: gray;
}

.page-number {
  border: 1px solid grey;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  margin: 0 0.25rem;
  cursor: pointer;
}

.active {
  border-color: purple;
}

.list-style-none {
  list-style: none;
  padding-inline-start: 0;
}

4. Putting the whole code together

We have our Pagination component ready, now we just need to call the component in App.js file.

 <div className="App">
    <Pagination pageDataLimit={5} posts={posts} />
 </div>

Once you have written all the code, run

npm start

The whole code and demo is uploaded on github.
Happy Coding!

Fetch API: Basics

Shraddha Gupta — Sun, 15 Aug 2021 15:41:40 +0000

Fetch in layman term means "to get".
API is an acronym for Application Programming Interface.

What exactly is an API ?
To go by proper definition,

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software

Now imagine you have an application or a program in your system which needs some data stored at a remote server. For your program to access that data it needs to let the server know about its requirement. And for this purpose it requires a communication interface through which the program can convey its request to the server and the server can respond in a specific format. This interface or the set of rules which our program uses to communicate with other software or server is called Application Programming Interface.

Fetch API
So, Fetch API provides this interface for your programs to be able to send requests to a URL or a remote server and recieve response based on that request in a hassel free way.

In this blog we are going to make a basic app around Fetch API, where we will fetch random dog images from the URL https://random.dog/woof.json, by following these steps:

Setting up files
Writing Fetch API function
Converting ReadableStream into JSON
Accessing Image URL from the fetched data
Inserting Image URL in img tag
Adding Event Listener on Button

So let's get started!

1. Setting up files

Create an HTML file index.html with a button and an image tag. The images we will get as response will be displayed here, so for now we are keeping the value of src attribute as src="#". You can also add an h1 tag for heading.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Dogs</title>
</head>

<body>
  <h1>Random Doggies, Woof!</h1>
  <button id="getImage">Get Doggie</button>
  <img src="#" alt="dogs" id="images" class="img-class">
</body>

</html>

For writing our JavaScript code, create a main.js file and include it in the HTML file with the help of script tag. Place script tag inside the head tag.

<script defer src="./main.js"></script>

Also create a style.css file for a little styling, so that the images won't be too large. Add the link tag inside the head tag.

<link href="./style.css" rel="stylesheet"></link>

body{
  margin: 0;
  text-align: center;
}

.img-class{
  display: none;
  width: 240px;
  margin: 2rem auto;
  border-radius: 0.5rem;
}

button{
  width: 10rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 2px solid black;
  font-size: 1rem;
  cursor: pointer;
  margin: 1rem;
}

2. Writing Fetch API function

JavaScript provides us with a fetch() method, which we are going to use to make our request.
fetch() method takes the URL where we want to send request as a parameter and returns a promise.

What is a promise?
Imagine it like, the fetch method promises our program to wait for it and it will either bring back the requested response or will give the reason why it was not able to fulfill its promise.

function fetchData(){
  fetch("https://random.dog/woof.json")
    .then(response => console.log(response))
    .catch(err => console.log(err))
}
fetchData();

fetchData() invokes the function, so when you run the app as soon as the JavaScript file is loaded it will run the fetchData() function.

In your browser at this point you might be able to see something like this:

Right click on the page, and click on Inspect element, in the console opened, you can see a Response object like this:

Since you got the response it means our request was responded with proper data and no error occurred.

On expanding this object, you can see the body field. This field contains the data we require but right now its in ReadableStream format. So, we need to convert it into a readable format that is a JSON object.

3. Converting ReadableStream into JSON

function fetchData(){
  fetch("https://random.dog/woof.json")
    .then(response => {
      return response.json()
    })
    .then(jsonData => console.log(jsonData))
    .catch(err => console.log(err))
}
fetchData();

Doing response.json() will convert the ReadableStream into json format. But since its not sure that the ReadableStream will definitely be downloaded and is convertible to JSON format, response.json() returns a promise, and if its resolved we get the data.

Now refresh the page and see for yourself if the data is properly converted into json format or not.

4. Accessing Image URL from the fetched data

Now since we got the JSON, let's extract the url property by changing the line

jsonData => console.log(jsonData)

with this

jsonData => console.log(jsonData.url)

5. Inserting Image URL in img tag

For updating the src attribute of img tag we need to access the tag in our JavaScript file, and update the src attribute with jsonData.url

const imgTag = document.querySelector("#images");
function fetchData() {
  fetch("https://random.dog/woof.json")
    .then(response => response.json())
    .then(jsonData => {
      imgTag.style.display = "block";
      imgTag.setAttribute("src", `${jsonData.url}`);
    })
    .catch(err => console.log(err))
}
fetchData();

6. Adding Event Listener on Button

Since we want to fetch a random image everytime we click the button and not when we refresh the page, we need to add an eventListener to our button and remove fetchData() call.

const getButton = document.querySelector("#getImage");
getButton.addEventListener("click", fetchData);

Now, after putting together our whole JavaScript code, it would look like:

const getButton = document.querySelector("#getImage");
const imgTag = document.querySelector("#images");

function fetchData() {
  fetch("https://random.dog/woof.json")
    .then(response => response.json())
    .then(jsonData => {
      imgTag.setAttribute("src", jsonData.url);
      imgTag.style.display = "block"; // to unhide img tag
    })
    .catch(err => console.log(err))
}

getButton.addEventListener("click", fetchData);

This is how our app would look:

Here, our basic Fetch API app is completed. The whole code is hosted on my GitHub, you can check out this link and follow along with each commit.
Also if you want to read more about document.querySelector(), setAttribute(), addEventListener(), etc., read my blog DOM Manipulation for better understanding.

Happy Coding!

DOM Manipulation: Hands-On

Shraddha Gupta — Wed, 11 Aug 2021 17:02:15 +0000

The Document Object Model (DOM) is a programming interface for web documents. Browser creates a DOM of every web page when the page is loaded. DOM comprises of nodes and objects. We can access these nodes in our JavaScript code with the help of various selectors and modify the HTML elements using the reference.

So, in this blog, we are going to see some methods of accessing and creating HTML elements using JavaScript. We will have two buttons, one to create a form which will take two numbers, multiply them and show the output and the other to delete the entire form from the DOM.

This is how our end product would look like -

Now, sit straight, get your IDE ready and let's dive into it.

Create an HTML file index.html having two buttons for creating and deleting a form, and a section where our form will be displayed.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
</head>

<body>
  <button id="create_form" class="button">Create Form</button>
  <button id="delete_form" class="button">Delete Form</button>
  <section id="form_area"></section>
</body>

</html>

Now, since we will be manipulating the DOM, create a main.js file for JavaScript code and include it in the html file. Add the script tag inside the head tag.

<script defer src="./main.js"></script>

Steps to create form:

1. Create a form element and assign attributes

let form = document.createElement("form");
form.setAttribute("id", "form");
form.setAttribute("class", "multiplication-form");

What is document? Document is an object created by the browser when html page is loaded, so basically all of our html code inside html tag is included in the document.
createElement() As the name suggests this method creates an html element which is provided as the parameter
setAttribute() This method is used to add the attribute to the html element created, it takes the attribute name as the first parameter and its value as the second parameter

2. Create input elements and submit button

Just like we created the form element and added attributes, try to create two input elements with the attributes

For first input tag

type - number
id - first_number
class - input
required - true
placeholder - enter number 1

For second input tag

type - number
id - second_number
class - input
required - true
placeholder - enter number 2

And for one button with the attributes

type - submit
id - submit_button
class - button
To add text inside button you can write button.innerText = "submit"

View Code

let input1 = document.createElement("input");
input1.setAttribute("type", "number");
input1.setAttribute("id", "first_number");
input1.setAttribute("class", "input");
input1.setAttribute("required", "true");
input1.setAttribute("placeholder", "enter number 1");

let input2 = document.createElement("input");
input2.setAttribute("type", "number");
input2.setAttribute("id", "second_number");
input2.setAttribute("class", "input");
input2.setAttribute("required", "true");
input2.setAttribute("placeholder", "enter number 2");

let button = document.createElement("button");
button.setAttribute("type", "submit");
button.setAttribute("id", "submit_button");
button.setAttribute("class", "button");
button.innerText = "Submit";

3. Add them inside form element

To add elements inside another element we can use two methods, one append() and second appendChild().

append() lets us add multiple elements at once and doesnt return any refrence whereas by using appendChild() we can add only one element and it will return a reference of the updated element
We will use append to add all the elements

form.append(
  input1,
  input2,
  button,
);

4. Add the form element into our HTML DOM

Now, to add the form element we need to have access of the section tag so that we can append the form into it.
We will use the querySelector() method for that.

const section = document.querySelector("#form_area");
section.append(form);

The querySelector() method selects and return the tag from the DOM with the help of different selectors. Here we are using id as the selector.

5. Create div to display output and append

To display our output we need to add one more element in the section tag, i.e. a div tag, it can be a paragraph too.

let div = document.createElement("div");
div.setAttribute("id", "output");
div.setAttribute("class", "output-div");
section.append(div);

Now putting all the code together in a function it would look like

const section = document.querySelector("#form_area");
function createForm() {
  let form = document.createElement("form");
  form.setAttribute("id", "form");
  form.setAttribute("class", "multiplication-form");

  let input1 = document.createElement("input");
  input1.setAttribute("type", "number");
  input1.setAttribute("id", "first_number");
  input1.setAttribute("class", "input");
  input1.setAttribute("required", "true");

  let input2 = document.createElement("input");
  input2.setAttribute("type", "number");
  input2.setAttribute("id", "second_number");
  input2.setAttribute("class", "input");
  input2.setAttribute("required", "true");

  let button = document.createElement("button");
  button.setAttribute("type", "submit");
  button.setAttribute("id", "submit_button");
  button.setAttribute("class", "button");

  let div = document.createElement("div");
  div.setAttribute("id", "output");
  div.setAttribute("class", "output-div");

  form.append(
    input1,
    input2,
    button,
  );

  section.append(form);
  section.append(div);
}

6. Adding event listener to create button

With this our form is ready with all the elements. But now we need to display the form when we click on the create form button. For that we need to access the button and put a listener to it.

const createFormButton = document.querySelector("#create_form");
createFormButton.addEventListener("click", createForm);

addEventListener() is a method which listens to events occuring with the specific tag. It takes the type of event as first parameter and a call back function as second parameter.
Call backs are are functions which are invoked after a certain task is completed. In this case after the button is clicked, createForm function will be called to create the form.

Steps to delete form:

1. Creating delete form function

To remove all the elements inside the section tag we will access the section and loop through all the elements and remove them one by one

function deleteForm() {
  while (section.firstChild) {
    section.removeChild(section.firstChild);
  }
}

This function will first remove the form tag and then the div tag from the section. You can write console.log(section.firstChild) in the while loop to check what is happening.

2. Adding event listener to delete button

Now to trigger the deletion of form after clicking on the delete button, we need to add an event listener to the button same as we did for create button.

const deleteFormButton = document.querySelector("#delete_form");
deleteFormButton.addEventListener("click", deleteForm);

At this point if you run your code and click on the create button you will see the form elements getting displayed, but if you keep on clicking the create button the form elements keep pilling up and we do not want that.

To prevent adding up form elements, we will run the delete function before creating and adding any elements inside section tag.

So our createForm() function would look like this -

function createForm() {
  deleteForm(); 
  let form = document.createElement("form");
  form.setAttribute("id", "form");
  form.setAttribute("class", "multiplication-form");
// ...rest of the code
}

Creating Multiplication function

Now, we have our buttons working. Create button is creating the form and delete button is deleting it. But now we want to get our form working. It should multiply the numbers we entered and display us the result. For that we need to create a function which will get the input values multiply it and show it in the output div we created after we submit the form.

function multiplyNumbers(event) {
  const number1 = document.querySelector("#first_number");
  const number2 = document.querySelector("#second_number");
  const output = document.querySelector("#output");
  output.innerText = parseInt(number1.value) * parseInt(number2.value);
  event.preventDefault();
}

Adding event listener to form tag

To listen to the submit event we will have to add a submit event listener on the form, but since our form is not created when our html page is loaded, we can't access the form element globally. We need to put it inside createForm() so that the element will be created before we add event listener to it.

document.querySelector("#form").addEventListener("submit", multiplyNumbers);

With this our whole app is completed. Add the below styles in style.css file and import it using link tag to make it look pretty or you can add your own styles.

<link rel="stylesheet" href="style.css></link>

body{
  margin: 0;
  text-align: center;
}

.button{
  margin: 2rem 1rem;
  padding: 0.2rem 0.5rem;
  max-width: 10rem;
  height: 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 0.5rem;
  color: white;
  background-color: blueviolet;
  cursor: pointer;
  transition: scale 0.2s;
}

.button:active{
  transform: scale(0.95);
  transition: scale 0.2s;
}

.multiplication-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: fit-content;
  padding: 2rem 1rem 0 1rem;
  margin: 1rem auto;
  border: 2px solid black;
  border-radius: 0.5rem;
}

.input{
  margin: 0.5rem 1rem;
  padding: 0 0.5rem;
  height: 2rem;
  max-width: 15rem;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 0.5rem;
  font-weight: bold;
  color: blueviolet;
  outline: none;
}

.output-div{
  max-width: 32rem;
  margin: 2rem auto;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: underline;
}

You can click the GitHub link for the whole code and check code at every step via commits. I hope you learned something new. Happy Coding!