This is where constructors come into play. Constructors are special types of methods with no return type. They are basically used to initialise the object, to set up its internal state, or to assign default values to its attributes.

In this tutorial, we will go deep into the topic of constructors in Java. You’ll learn how they work and why they are essential in object creation and Java programming. By the end, I hope you’ll understand why they’re one of the core concepts of OOP.

Let’s start…

Prerequisites

You don’t need to know anything too advanced to start learning about constructors in Java. Just a basic understanding of Java syntax, classes, objects, methods, parameters, arguments, and access modifiers is enough to get started.

What we’ll cover:

• What are Constructors in Java?

  • Constructor syntax:

• Types of Constructors

  • Default Constructor

  • No Argument constructor

  • Parameterised Constructor

  • Copy Constructor

• What Happens Behind the Scenes When a Constructor Is Called in Java?

• How to Use the return Keyword in Constructors

  • Sample Code:

  • Example:

• Conclusion

• Frequently Asked Questions

What are Constructors in Java?

As mentioned above, constructors are special types of methods that:

1. do not have a return type (not even void),

2. have the same name as the class

3. are called automatically when an object is created using the new keyword.

A constructor’s main purpose is to initialise a newly created object, to set up its internal state, or to assign default values to its attributes.

Constructors can also be understood as a special block of code which is called when an object is created – either automatically or manually by hard-coding it – with the values we want to initialise the object with.

If we’re okay with the object using default values (like 0 for numbers or null for objects), Java will handle that for us automatically. But if we want to give the object specific values when it's created, we need to write a constructor that takes those values as parameters and uses them to set up the object.

Constructor syntax:

class ClassName {

    // Default constructor with access modifier
    [access_modifier] ClassName(parameters...) {
        // constructor body
    }

}

Examples

When the constructor is not defined explicitly

class Car {

    String brand;
    int year;

    // No constructor is defined, so Java provides a default one
}

public class Main {

    public static void main(String[] args) {

        Car car1 = new Car();  // Java calls the default constructor

        // Default values: brand = null, year = 0
        System.out.println("Brand: " + car1.brand);
        System.out.println("Year: " + car1.year);
    }
}

Output:

In the above code, we have a Car class with two variables:

1. brand of type String

2. year of type int

Since a class is just a blueprint, we need to create an object to actually use it. This is done in the Main class. When we create a Car object using new Car(), Java looks for a constructor. Because we didn’t define one, the compiler automatically provides a default constructor (one with no arguments).

This allows us to create the object and print its variables without any errors. The values printed will be the default ones — null for the String, and 0 for the int.

We'll dive deeper into how this works behind the scenes later, step by step, so it becomes easier to understand.

When we have defined a constructor

public class Car {

    String brand;
    int year;

    // Constructor with parameters to initialize custom values
    public Car(String brandName, int modelYear) {
        brand = brandName;
        year = modelYear;
    }
}

public class Main {

    public static void main(String[] args) {

        Car car2 = new Car("Toyota", 2022);  // Custom values

        System.out.println("Brand: " + car2.brand);
        System.out.println("Year: " + car2.year);
    }
}

Output

This is the same code as before, with one key difference: this time, we’ve explicitly defined a constructor. Because of this, the output we see isn’t the default values (null for String, 0 for int), but the custom values we provided.

How does that happen? Simple – we pass values as arguments when creating the object:

Car car2 = new Car("Toyota", 2022);

These values are received by the constructor as parameters and are then used to initialize the object’s variables. As a result, instead of default values, we get the brand and year we specified.

Types of Constructors

There are mainly four types of constructors:

1. Default Constructors

2. No-Arguments Constructor

3. Parameterised Constructor

4. Copy Constructor

Default Constructor

A type of no-argument constructor that is added by the compiler during the compilation process so that the values of the object can be initialised. It’s only added by the compiler if you don’t add one explicitly.

Syntax:

public class MyClass {

    public MyClass() {
        // Constructor body
    }

}

Example

public class Bike {

    // No constructor defined here
    // Compiler will automatically add a default constructor

    public static void main(String[] args) {
        Bike myBike = new Bike();  // Calls the compiler-provided default constructor
        System.out.println("Bike object created!");
    }

}

The code becomes the following after the compiler adds a default constructor during the compilation process:

public class Bike {

    // Compiler-added default constructor
    public Bike() {
        super();  // Calls Object class constructor
    }

    public static void main(String[] args) {
        Bike myBike = new Bike();  // Now calls this explicit default constructor
        System.out.println("Bike object created!");
    }

}

Output

Bike object created!

No Argument constructor

No-argument constructor is a type of constructor that you explicitly write in your code and that does not contain any parameters.

Now, you may be wondering…Isn't it the same as the default constructor? The answer is both yes and no.

There isn’t much difference between the default constructor and the no-argument constructor, as both do not take any parameters. But there is one key difference.

The default constructor, as we have already discussed, is a type of no-argument constructor that is automatically added by the compiler when it doesn’t find one in our code. In contrast, a no-argument constructor is a type of constructor that we write in our code.

In short, if the compiler is the one that is adding a constructor during the compilation process, it's called a default constructor. But if we are the ones adding the constructor, it’s called a no-argument constructor.

The main difference between a default constructor and a user-defined constructor is how they are created and what they do.

• A default constructor is automatically added by the compiler if we don’t add one ourselves. It doesn’t do much – it just calls the parent class (usually the Object class) and sets all variables to their default values. For example, int becomes 0and objects become null.

• A user-defined constructor is one that we write ourselves. We can add custom logic inside it, set custom values to variables, and use access modifiers like public, private, or protected. This means we can decide how the object should be set up when it is created.

Note that even if we don’t write super() in our constructor, Java still adds it automatically unless we call another constructor with this() or call a different super(...) with parameters.

We will understand this deeply in the next section.

Syntax:

class ClassName {

    public ClassName() {
        // Body (optional)
    }

}

Example

Let's use the same Bike example we used to explain the default constructor.

public class Bike {

    public Bike() {
        System.out.println("Bike object created!");
    }

    public static void main(String[] args) {
        Bike myBike = new Bike();
    }
}

Output:

Bike object created!

In the above code, we have defined a constructor in our code while writing it. This means that it is an example of a no-argument constructor.

We know that both types of constructors are defined without any parameters, but what about the body? We haven’t said anything about it. Let’s see what happens if we write code with a no-argument constructor without a body:

public class Bike {

    Bike() {
        // No body
    }

    public static void main(String[] args) {
        Bike myBike = new Bike(); // Calls the user-defined no-argument constructor
        System.out.println("Bike object created!");
    }
}

Output:

Bike object created!

The code still gets compiled because the compiler adds the super() keyword during the compilation process, which initialises the object using the object class.

Parameterised Constructor

A constructor that accepts parameters is called a parameterised constructor and is only used when we have to initialise an object’s attributes with custom values.

• Parameter refers to the variable listed in the constructor or method definition.

• Argument is the actual value passed when calling the constructor or method.

It gives us the flexibility of initiating our object with custom values given at the time of object creation.

Syntax

Below is the syntax for a parameterised constructor that takes one parameter:

class ClassName {

    // Data members (instance variables)
    DataType variable1;

    // Parameterized constructor
    ClassName(DataType param1) {
        variable1 = param1;
    }

    // Main method to create objects
    public static void main(String[] args) {
        // Creating object using parameterized constructor
        ClassName obj = new ClassName(value1);
    }
}

Example

We will again use the Bike example for this.

public class Bike {

    String modelName;  // instance variable

    // Parameterized constructor
    Bike(String model) {
        modelName = model;
    }

    public static void main(String[] args) {
        // Pass parameter while creating the Bike object
        Bike myBike = new Bike("Mountain Bike");
        System.out.println("Bike object created! Model: " + myBike.modelName);
    }
}

Output:

Bike object created! Model: Mountain Bike

In this example, we’re working with a Bike class that has an instance variable of String data type called modelName, and a constructor to set the value of that variable.

The constructor takes a parameter called model and assigns it to modelName. So, when we create a new Bike object and pass in the string "Mountain Bike", the constructor stores that value in the modelName variable.

Because of this, when we print out the model name, we see "Mountain Bike" instead of null, which is the default value of the String data type, as now the value of the modelName has been updated.

Copy Constructor

A copy constructor is used to create a new object as a copy of the existing object. Unlike C++, Java doesn’t have a default copy constructor. Instead, we have to create our own by creating a constructor that takes an object of the same class as a parameter and copies its fields.

Syntax

class ClassName {

    // Fields
    DataType1 field1;
    DataType2 field2;
    // ... other fields

    // Normal constructor
    ClassName(DataType1 f1, DataType2 f2) {
        field1 = f1;
        field2 = f2;
        // ... initialize other fields
    }

    // Copy constructor 
    ClassName(ClassName other) {
        field1 = other.field1;
        field2 = other.field2;
        // ... copy other fields
    }
}

Example

public class Bike {

    String modelName;  // instance variable

    // Parameterized constructor
    Bike(String model) {
        modelName = model;
    }

    // Copy constructor
    Bike(Bike otherBike) {
        modelName = otherBike.modelName;
    }

    public static void main(String[] args) {
        // Create a Bike object using the parameterized constructor
        Bike myBike = new Bike("Mountain Bike");
        System.out.println("Bike object created! Model: " + myBike.modelName);

        // Create a copy of the existing Bike object using the copy constructor
        Bike copiedBike = new Bike(myBike);
        System.out.println("Copied Bike object created! Model: " + copiedBike.modelName);
    }
}

Output:

Bike object created! Model: Mountain Bike

Copied Bike object created! Model: Mountain Bike

In the above code, we have created a copy constructor to copy the values of the object (myBike) into a new object (copiedBike), which we have defined in the main class.

But the way the new object is called is a little different. Instead of passing arguments for the constructor, we have passed the original object.

Why Copy Constructors?

A copy constructor is used to make a copy of the object, but you can also make a copy using the clone() method or the object.clone() method. So why do we use a copy constructor?

The copy constructor makes a deep copy, while the clone method makes a shallow copy of the object. There are various things that you should know before using cloning techniques, like CloneNotSupportedException.

On the other hand, copy constructors are clear and easy to understand, and work well with final fields. We can control how the copy happens (deep vs. shallow) and especially when we are dealing with mutable objects.

What Happens Behind the Scenes When a Constructor Is Called in Java?

So, just to recap: when we create an object using the new keyword, a constructor is automatically called. If we haven't defined any constructors in our class, Java automatically defines a constructor for us.

But while writing and running our code, we mostly focus on what’s visible in our editor, as in what we can see. Let’s dive a little deeper and explore what happens behind the scenes – at the compiler and JVM level – when an object is created and executed.

• Step 1: Memory Allocation – When we create an object using a new keyword, Java allocates memory for that object in the heap. This memory is where the object’s fields (also called attributes) will be placed.

• Step 2: Reference Creation – A reference to this object is stored on the stack, which lets our program interact with the object that lives in the heap.

• Step 3: Constructor Creation – Java then determines which constructor to call. If no constructor is explicitly defined in our class, the compiler automatically inserts a constructor with no parameters.

• Step 4: Superclass Constructor Call – Before executing the constructor’s body, Java first calls the constructor of the superclass using the super() keyword. This ensures that the fields inherited from the parent class are properly initialised. If you don’t explicitly write super(), the compiler adds it automatically in the first line of the code, but only if the superclass has a no-argument constructor, unless we're already calling another constructor via this().

But don’t use both the super() and this() keywords in the same constructor (you can use them in separate constructors.

Let’s say that it doesn’t have a super class – then what?

The answer is simple: Java has an in-built Object class that has a no-argument constructor by default. This is why our classes run smoothly even if we don’t write super() ourselves, as Java calls it in the background.

That means every class we create is a subclass of the object class:

Attribute Initialisation:

At this point, fields get initialised:

• First, with default values (for example, 0 for int, null for objects),

• Then, with any explicit initialisations we've written (for example, int x = 10), the default values will get replaced by them.

Constructor Execution:

And finally, the logic runs. This is where all or some of the attributes defined in the class for object creation are initialised by the parameters used during object creation, with the help of constructors.

But not every field may get initialised. Fields that are not updated by the constructor will keep the values they already have (either the default value or the explicitly initialised values).

In short, the constructor gives us the flexibility to customise our object at the time of creation, but it doesn't automatically set every field unless we explicitly write the logic for it.

Check the code below to understand better:

class Example {

    int a;           // default 0
    int b = 10;      // explicitly initialized to 10
    String name;     // default null

    Example(int x) {
        a = x;       // only 'a' is set through constructor
        // 'b' is not changed, stays 10
        // 'name' is not changed, stays null
    }

    void display() {
        System.out.println("a = " + a);
        System.out.println("b = " + b);
        System.out.println("name = " + name);
    }

    public static void main(String[] args) {
        Example obj = new Example(5);
        obj.display();
    }
}

Output:

In the above example, we have three data members – a, b, and name. We have already done the declaration and initialisation of the variable b at the beginning and given a value to a at the time of object creation.

So we can see that:

1. ‘a’, whose value has been updated by the constructor with the value given at the time of object creation, has the same value

2. ‘b’, which already had a value and does not get updated by the constructor, prints the same value

3. the string ‘name’ didn’t have a value, so null was printed instead, as it is the default value of the String data type.

How to Use the return Keyword in Constructors

We know that constructors are defined without a return type, but we can use the return keyword in the constructor only to exit the constructor early, not to return a value. Check out the code below.

Sample Code:

public class Bike {

    String modelName;  // instance variable
    int speed;

    // Parameterized constructor
    Bike(String model, int sp) {
        modelName = model;
        return;
        speed = sp;
    }

    public static void main(String[] args) {
        // Pass parameter while creating the Bike object
        Bike myBike = new Bike("Mountain Bike", 20);
        System.out.println("Bike object created! Model: " + myBike.modelName);
        System.out.println("Speed of the Bike is " + myBike.speed);
    }
}

Let’s try to understand the above code and the use of the return keyword along with it. We will start with what would happen if the return keyword wasn’t here. The code would have executed without any errors and would have received an output.

Now, what will happen if we add the return keyword? As we have discussed above, the return keyword will tell the compiler not to go beyond this point in the constructor.

So whatever we have written in the constructor after the return keyword will not be compiled, and if that had any value and was necessary for the proper execution of our code, the compiler will throw an error.

The error says it clearly ‘unreachable statement’, which means that the compiler was not allowed to go beyond the return keyword.

Now that you understand the return keyword, let’s see when you can use it.

Example:

public class Bike {

    // Constructor with a condition to exit early
    Bike(boolean skip) {
        if (skip) {
            System.out.println("Constructor exited early");
            return; // Ends constructor execution here
        }

        System.out.println("Constructor continues...");
        // More initialization logic can go here
        System.out.println("Bike object initialized successfully");
    }

    public static void main(String[] args) {
        System.out.println("Creating first bike (skip = true):");
        Bike bike1 = new Bike(true);  // Constructor will exit early

        System.out.println("\nCreating second bike (skip = false):");
        Bike bike2 = new Bike(false); // Constructor will continue
    }
}

We’ve defined a Bike class that has a constructor with one boolean parameter called skip. Inside the constructor, there's an if statement that checks if skip is true. If it is, the constructor prints a message and uses the return keyword to exit early. This means the rest of the constructor won’t run.

But there is no else block. So what happens when skip is false? In that case, the if condition is not true, then the code inside the if statement is not executed (including the return keyword) and the constructor simply continues to the next lines of code. That’s where we do the actual bike initialisation and print a success message.

In short:

1. If skip is true, the constructor exits early.

2. If skip is false, the constructor continues and finishes the setup.

This is a simple way to control how much of the constructor runs, based on a condition.

Conclusion

In this blog, we have understood many different topics, what a constructor is, its different types, like default constructor, no argument constructor, parameterised constructor and copy constructor, not only with theory but with code examples as well.

Understanding them will not only enhance our understanding but also help us write modular and well-maintained code in Java. While this concept is also important in OOP, as it is centred around the concept of objects and constructors are the ones that are used to initialise them.

Frequently Asked Questions

Q1. Why do we use constructors?

A: We use constructors because:

1. They are created automatically by the compiler and initialise the object with default values.

2. We can initialise all the attributes of the objects in one go.

3. They prevent incomplete or incorrect object initialisation by ensuring that important data is provided during object creation.

4. Code maintainability and modularity increase.

5. We can use objects as soon as they are created.

Q2. What is the basic difference between Method Overloading and Constructor Overloading?

A:

You can check out some of my other beginner-friendly articles on my blog:

1. Understanding abstraction in Java

2. How to build a Movie App in React using TMDB API?

3. How to merge two sorted arrays

In this tutorial, we will make an Image Search App using the Unsplash API to get access to its enormous collection of images and also download them.

Before starting the development part of our app, let’s see how it will look exactly.

Let’s start…

Contents

1. How to Create the React App

2. How to Build the UI of our App

3. How to Get the Access Key and API Endpoint from Unsplash

4. How to Use Hooks in our App

5. How to Display Images in our App

6. How to Handle Errors

7. Conclusion

What will we learn?

This project is mainly for beginners, but anyone who wants to brush up their skills can follow along. In this tutorial, you will learn:

1. How to get API endpoints and Access Keys from the Unsplash developer's dashboard.

2. How to use the useState and useEffect hooks to fetch data from the API.

3. How to use the map function to display images or any other data from the API.

How to Create the React App

It's very easy to create a React app – just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app image-search-app

If you are unsure how to properly set up a create-react-app project, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

How to Build the UI of our App

There will be two sections in the UI of our App:

1. The Input section

2. The Result section where we will show the images

In the input section, we have an input tag in which we will write the search term or query. We also have a button with an onClick event handler which will trigger the function responsible for fetching the data from the API.

import React from "react";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-12 d-flex justify-content-center align-items-center input">
            <input
              className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
              type="text"
              placeholder="Search Anything..."
            />
            <button
              type="submit"
              onClick={Submit}
              className="btn bg-dark text-white fs-3 mx-3"
            >
              Search
            </button>
          </div>
        </div>
      </div>
    </>
  );
};
export default App;

The output will be the following:

In this article, we will not be discussing the styling part of the app. This way we can stay more focused on the React part which is more necessary to understand.

How to Get the Access Key and API Endpoint from Unsplash

Let's get those API keys from Unsplash for Developer. follow the steps given below to get your API key and other details:

First, go to the above link and click register as a developer.

Then fill in the credentials they have asked for:

After this, you will be directed to the developer dashboard. Click on the new project.

You will be asked to accept all the terms written there. Read them if you want or else just check all of them and click the button at the end to proceed.

Next, a modal form will appear as shown below in which you have to write the application information like name and description.

Then click Create Application.

Now that our application has been created, we can access the Access Key and Secret Key under the Keys section:

Notice that at the very beginning of this page, it says Demo. This means that our application has been accepted but is still in development mode.

In this mode, we can only make 50 requests per hour. If we exceed this limit, our API will not work and the images will not load.

After this, head over to the documentation and select the option “Search Photos by Keyword”.

Scroll down to the Response Section and copy the link as shown:

API endpoint

Now we have both our API key and the API endpoint. Let's proceed with our App.

How to Use Hooks in our App

We will be using the useState and useEffect hooks in our app. They'll let us set the states which are required to get the value of input and search the API for data regarding that value.

For hooks to work, we have to define them at the very top of our app like this:

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

How to Set State Using the useState Hook

As we discussed above, we'll use hooks to extract data from the API using the value searched in the input field. That value will be read by our React app using the useState hook.

We define states using this hook for specific purposes. In this app, we will be defining two of them: one for getting the value from the input field and the other to display results fetched from the API.

const [img, setImg] = useState("");
const [res, setRes] = useState([]);

There are two parameters in the above code used to define the useState hook: one of them is the state which we will use to store values, and the other is the function that we will be using to update the state values. Read more about useState hook here.

We have defined the first state as an empty string as it will be used to store the input from the search bar (and that is also a string).

The other state is initialized as an empty array because it will store the data fetched from the API and then show it in our Result Section

By default, we can only get up to 10 data points per API, but we can exceed that using a parameter per_page which we will see later in this tutorial.

How to use the img state

The next step is to store the value of the input text field into the img state using the value attribute of the input tag. Then we add an onChange() event handler to it. This onChange() event handler will have a function that will be used to update the state using the e.target.value.

<input
  className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
  type="text"
  placeholder="Search Anything..."
  value={img}
  onChange={(e) => setImg(e.target.value)}
/>;

How to Make API Requests to Unsplash using the useEffect Hook

We will now use the Unsplash API and the Access key we have acquired in the above step to fetch data and display it in our app.

For this, we will again need a state to store the data fetched from the API which we have already defined in the above section (res, which is initialized as an empty array for this purpose only).

There are many methods in JavaScript we can use to fetch data from an API, but we will be using the async-await method – it's by far the simplest one.

const fetchRequest = async () => {
  const data = await fetch(
    `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}`
  );
  const dataJ = await data.json();
  const result = dataJ.results;
  console.log(result);
  setRes(result);
};
useEffect(() => {
  fetchRequest();
}, []);

Notice that we have written ${Access_Key} – here we have to write our access key. We complete this step to secure our API key as anyone can misuse it.

In Unsplash, we can also apply for the production of our app, and by doing so we can go online with the images that Unsplash has to offer.

For this reason, everyone gets a different set of Access Keys and Security Keys. It's always best to hide these keys from others so that it doesn’t get misused and we pay the price for that.

In the above code, we have initially stored the data fetched from the API into the data variable which is then converted into JSON for simplicity's sake. This lets us read the data and extract the necessary values, which are stored in the dataJ variable and consoled to check if we are getting the value we need or not.

API in JSON format

And if we open any one of the above search results to see what values are there for us to extract:

{
    "total": 133,
    "total_pages": 7,
    "results": [
    {
    "id": "eOLpJytrbsQ",
    "created_at": "2014-11-18T14:35:36-05:00",
    width: 4000,
    height: 3000,
    color: "#A7A2A1",
    blur_hash: "LaLXMa9Fx[D%~q%MtQM|kDRjtRIU",
    likes: 286,
    liked_by_user: false,
    description: "A man drinking a coffee.",
    user: {
    id: "Ul0QVz12Goo",
    username: "ugmonk",
    name: "Jeff Sheldon",
    first_name: "Jeff",
    last_name: "Sheldon",
    instagram_username: "instantgrammer",
    twitter_username: "ugmonk",
    portfolio_url: "http://ugmonk.com/",
    profile_image: {
    small:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
    medium:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
    large:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202",
    },
    links: {
    self: "https://api.unsplash.com/users/ugmonk",
    html: "http://unsplash.com/@ugmonk",
    photos: "https://api.unsplash.com/users/ugmonk/photos",
    likes: "https://api.unsplash.com/users/ugmonk/likes",
    },
    },
    current_user_collections: [],
    urls: {
    raw: "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
    full: "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
    regular:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
    small:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
    thumb:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef",
    },
    links: {
    self: "https://api.unsplash.com/photos/eOLpJytrbsQ",
    html: "http://unsplash.com/photos/eOLpJytrbsQ",
    download: "http://unsplash.com/photos/eOLpJytrbsQ/download",
    },
    },
    // more photos ...
    ],
    },

It's better to use this function inside the useEffect hook as it will prevent any re-rendering of the data if we made any changes in the UI of our App. To understand useEffect in-depth, click here.

We use the setRes function to update the value of res from an empty array to an array which will store all the fetched data in the JSON format as shown above.

We have already given an onClick function to the button at the beginning of our app in the input section. Now it's time to define a function for this event handler which will be triggered as soon as the Search button is clicked. This function will call the fetchRequest function which will fetch the data and show us the result in the Result section.

const Submit = () => {
  fetchRequest();
  setImg("");
};

How to Display Images in our App

In the above section, we have stored the data fetched from the API into the res state which has stored them in the form of an array. To get these values from there, we have to use the map method.

<div className="col-12 d-flex justify-content-evenly flex-wrap">
  {res.map((val) => {
    return (
      <>
        <img
          className="col-3 img-fluid img-thumbnail"
          src={val.urls.small}
          alt="val.alt_description"
        />
      </>
    );
  })}
</div>;

If we go back and see the response in JSON, we will find a different kind of information: URLs which contains the path to the image. So here val.urls.small is the actual path to the image, and val.alt_description is the alt description of the picture.

There are different fields inside "urls" that give different data, such as:

• Raw: Actual raw image that was taken by a user.

• Full: Raw image in .jpg format.

• Regular: Best for practical uses, width=1080px.

• Small: Perfect for slow internet speed, width=400px.

• Thumb: Thumbnail version of the image, width=200px.

In this article, we will be using small, but there are others too as shown above that we can play with and find the appropriate one for us.

Final Product

By default, the number of items that can be fetched at a time is 10, but this number can be increased or decreased depending upon how many images we want our app to show.

To do this we just have to add a parameter at the end of our API call (per_page) as shown in the code, and put it equal to the number of images we want to show.

const fetchRequest = async () => {
  const data = await fetch(
    `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}&per_page=20`
  );
  const dataJ = await data.json();
  const result = dataJ.results;
  console.log(result);
  setRes(result);
};

There are many more parameters that Unsplash has to offer. Below is a list of a few of them:

parameters of Unsplash API

How to Handle Errors

If we do a quick search now on, say, flags, we will get our images. But there are still some issues that need to be fixed. One of them is the error we are receiving in the console.

Error in Console

To fix this, pass a unique key to every child using the id of the image. This key prop explicitly tells React the identity of each child in a list. This also prevents children from losing state between renders.

<div className="col-12 d-flex justify-content-evenly flex-wrap">
  {res.map((val) => {
    return (
      <>
        <img
          key={val.id}
          className="col-3 img-fluid img-thumbnail"
          src={val.urls.small}
          alt="val.alt_description"
        />
      </>
    );
  })}
</div>;

Conclusion

In this tutorial, we have developed a Photo Search app in React using the Unsplash API. While building our app, we discussed many things like how to use React Hooks to get the data from an API and use it to display images in our App.

There is much more you can do with this application to extend it. For example, we could add a Random button to display random images, create a checkbox to toggle between searching for photos or the users that posted them according to the user’s preference, add an infinite scroll to display more images, and more.

You can go through some of my other beginner-friendly, project-based articles here:

1. How to Make a Table in React using Hooks with Multiple Features

2. How I made my Portfolio in React

3. How to Make a Filter Component in React

Props are the read-only properties that are shared between components to give the unidirectional flow of React a dynamic touch. They're mainly shared from the parent component to the child component, but the reverse is also possible (though not recommended).

In this blog, we will discuss how to validate or check the props that we are passing to avoid complex debugging at a later stage.

What are PropTypes?

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don’t receive an error at the very end of our app by the console which might not be easy to deal with.

I don't recommend using them in short apps like projects for self-practice but it's totally up to you. For larger projects like for a client, it's often a wise choice and a good practice to use them.

There are many different types of PropTypes and all of them have their unique ES6 classes which we can use. We will discuss every type in this article.

How to use PropTypes

Before the release of React 15.5.0, PropTypes were available in the React package, but now we have to add the prop-types library in our project.

We can do so by running the following command in our terminal:

npm install prop-types --save

We can use PropTypes to validate any data we are receiving from props. But before using it we will have to import it as always in our app:

import PropTypes from 'prop-types';

They are often used after the component ends and starts with the name of the component as shown:

import React from 'react';
import { PropTypes } from "prop-types";

const Count = (props) => {
  return (
    <>
      .........
    </>
  )
};

Count.propTypes = {
  //// key is the name of the prop and
// value is the PropType
}
export default Count;

PropTypes are also objects with a key and a value pair where the ‘key’ is the name of the prop while the value represents the type or class by which they are defined.

Since defining PropTypes on a component does not depend on the component implementation, we will be leaving out the code for the component itself in all the following examples. The code above can be simplified to the following:

Count.propTypes = {
// Put props here
}

Let's discuss how many types of PropTypes are there before understanding them with an example.

Basic Types of PropTypes

The most basic way we can check a prop's type is by checking if it falls under the category of primitive types in JavaScript, such as a boolean, string, object, and so on.

Below is the list of all data types that are considered primitive or the basic ones with their classes that we can use to check props.

Below is an example that shows us how to use these PropTypes for type checking in our app. As we discussed already, they are defined as objects with a key and a value pair where the key is the name of the object while value contains the classes which will be used for type checking.

Count.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  address: PropTypes.object,
  friends: PropTypes.array,
};

In the above code, the name prop is expected to have a value which is a string, age is a number, address is an object, and friends is an array. If any value other than this has been used for the same props as a value, it will show an error in the console like this:

Console error for wrong PropTypes

We can chain any of the above with isRequired to make sure a warning is shown if the prop isn't provided.

Count.propTypes = {
  basicObject: PropTypes.object,
  numbers: PropTypes.objectOf(PropTypes.numbers),
  messages: PropTypes.instanceOf(Message),
  contactList: PropTypes.shape({
    name: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired,
  }),
};

Collective Type

We have seen how to validate or check to see what category of basic data type props fall into. But there are many more ways that props can be passed and used – such as collective types like an array of numbers, strings, and so on. So what about them?

We can also check the props for them. Below are the various ways in which a data type can be combined and used.

Array Types

Here we will discuss all the possibilities that can be formed with an array with their examples just like we saw with basic types.

Count.propTypes = {
  counts: PropTypes.array,
  users: PropTypes.arrayOf(PropTypes.object),
  alarmColor: PropTypes.oneOf(['red', 'blue']),
  description: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.instanceOf(Title)
  ]),
  }

Object Types

Just like the array types, here are some of the collective object types:

Count.propTypes = {
  basicObject: PropTypes.object,
  numbers: PropTypes.objectOf(PropTypes.numbers),
  messages: PropTypes.instanceOf(Message),
  contactList: PropTypes.shape({
    name: PropTypes.string,
    phone: PropTypes.string,
  }),
};

Advance Type Checking

There are many ways other than basic type checking we can use to check our props. This method mainly focuses on the React code rather than the data types.

How to Check for a React Component

If you want to just check to see if a prop is a React component, you can use PropTypes.element. This is useful for ensuring that a component only ever has one child component.

Count.propTypes = {
  displayEle: PropTypes.element,
};

How to Check for a React Component Name

Finally, we can check to see if the prop is the name of a React component by using PropTypes.elementType.

Component.propTypes = {
  as: PropTypes.elementType
}

<AnotherComponent as={Component} />

Custom Types

We can also have a custom validator or type checking for props but it requires an error object if the validation fails.

You can use this for both arrays and objects but the error object will be called for each key in the array or object. The first two arguments of the validator are the array or object itself and the current item's key.

Count.propTypes = {  // normal functionn
  customProp: function (props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        "Invalid prop `" +
          propName +
          "` supplied to" +
          " `" +
          componentName +
          "`. Validation failed."
      );
    }
  },
};

Count.propTypes = { // array function
  customArrayProp: PropTypes.arrayOf(function (
    propValue,
    key,
    componentName,
    location,
    propFullName
  ) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        "Invalid prop `" +
          propFullName +
          "` supplied to" +
          " `" +
          componentName +
          "`. Validation failed."
      );
    }
  }),
};

Default PropTypes

Sometimes, we want to be able to set a default value for a prop. For instance, our parent component might not require a title to be passed. But we still want a title to be rendered.

In cases like this, we can set a default value for our title which will automatically be rendered if the title has not been passed as a prop from our parent component.

Header.defaultProp = {
  title: "GitHub Users",
};

We can read more about this in the official documentation.

Example Time

Let’s understand how all this works with some simple React code.

We will make two reusable components, About.js and Count.js. The About Component is the parent component and the Count Component is the child component as shown here:

What if we change the value of the age prop from a number to a string without changing its type (PropTypes)?

import React from "react";
import Count from "./Count";
const About = () => {
  return (
    <>
      <div className="app">
        <Count name="Ateev" age="25" />
      </div>
    </>
  );
};

export default About;

We will receive an error in the console saying this:

It clearly states that the value of the age prop passed does not match the value expected (PropTypes).

From the above example, it should now be clear how we can use PropTypes. You can also see how useful they are for debugging your apps when the app is too big to find the bug with just conventional methods.

Conclusion

PropTypes are a great way to catch errors at run time and act as the first line of defense for your applications. They're not as type-safe as TypeScript but they're much easier to set up and work with.

You can also go through some of my other blogs:

1. What do you mean by the term Virtual DOM in React

2. What are Hooks in React?

3. How to make a portfolio in React

This is especially true if your data comes from an API, since users cannot look through everything your app has to offer.

In this article, we will be using dummy data that we have hardcoded and saved like an array in a separate component named Data.js.

What we'll cover here:

1. Getting Started

2. Creating our React App

3. Getting data from Data.js using Hooks

4. Working on the UI of our App

5. Making the Filter Component

6. Wrapping Up

Getting Started

For this particular project, we will be using dummy food data which contains several key-value pairs as shown in this code:

const Data = [
  {
    id: "1",
    title: "Poha",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2021-08/loudr2go_aloo-poha_625x300_05_August_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
    desc: " Poha. Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples",
  },
  {
    id: "2",
    title: "Upma",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
    desc: " A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
  },
  {
    id: "3",
    title: "Cheela",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2019-05/1afu8vt8_weight-loss-friendly-breakfast-paneer-besan-chilla_625x300_25_May_19.jpg?im=FaceCrop,algorithm=dnn,width=620,height=350",
    desc: "A staple across Indian households, moong dal is widely used in a number of Indian delicacies. One such delicacy is moong dal cheela. You can also add paneer to this recipe to amp up the nutritional value and make it, even more, protein-dense",
  },
  {
    id: "4",
    title: "Channa Kulcha",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-04/chana-kulcha_625x350_41429707001.jpg",
    desc: "A classic dish that never goes out of style. The quintessential chana kulcha  needs only a few ingredients - cumin powder, ginger, coriander powder, carom powder, and some mango powder, which is what gives the chana its sour and tangy taste.",
  },
  {
    id: "5",
    title: "Egg Curry",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-11/goan-egg-curry_620x350_41511515276.jpg",
    desc: "Eggs are a versatile food that can be cooked for any meal of the day. From breakfast to dinner, it can be a go-to food. Here is a mildly-spiced egg curry made with garlic, onions, a whole lot of kasuri methi, fresh cream, yogurt, and fresh coriander.",
  },
  {
    id: "6",
    title: "Paneer Aachari",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-04/paneer_625x350_61429707960.jpg",
    desc: "Don't get intimidated by the list of ingredients because not only are already in your kitchen cabinet, but also because all they'll need is 20 minutes of your time. Chunks of cottage cheese cooked in some exciting spices, yogurt and a pinch of sugar.",
  },
  {
    id: "7",
    title: "Fish Fry",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_41434360207.jpg",
    desc: "Get your daily dose of perfect protein. Pieces of surmai fish marinated in garlic, cumin, fennel, curry leaves, and tomatoes are pan-fried in refined oil and served hot. This fish fry recipe has a host of delectable spices used for marination giving it a unique touch.",
  },
  {
    id: "8",
    title: "Dum Alloo",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_51434362664.jpg",
    desc: "Your family will thank you for this fantastic bowl of dum aloo cooked Lakhnawi style. Take some potatoes, crumbled paneer, kasuri methi, butter, onions, and some ghee.",
  },
  {
    id: "9",
    title: "Malai Kofta",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
    desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
  },
  {
    id: "10",
    title: "Malai Kofta",
    category: "Snaks",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
    desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
  },
];

export default Data;

Among these key-value pairs, we also have a category which will be used for filtering the results.

We will be using bootstrap as the CDN for this project for styling our app.

After this tutorial, you should know more about how to make and import components in React, how to use data dynamically, and most of all how to pass and use props between parent and child components.

How to Create our React Component

It's very easy to create a React App – just go to your working directory in any of your preferred IDE’s and enter the following command in the terminal:

npx create-react-app react-filter-app

If you are unsure how to properly set up a create-react-app project you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start the localhost:3000 where our React app will be hosted. We can also see all our changes there.

How to Get the data from Data.js using Hooks

Now that we have successfully set up our React project, it’s time to fetch our data from Data.js and use it in our UI.

For this, we will first need to import our data in our App.js component and then use the useState hook for managing the state of our data.

import React, { useState } from "react";
import Data from "./Data";
import Card from "./Card";

const App = () => {
  const [item, setItem] = useState(Data);
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <h1 className="col-12 text-center my-3 fw-bold">Our Menu</h1>
          <Card item={item} /> // UI Component
        </div>
      </div>
    </>
  );
};

export default App;

How to Build the UI Part of our App

Now we have our data stored in a variable which we can use freely in our App, we can work on the UI.

The UI will contain bootstrap cards which we'll make dynamically using the map function.

We will make a different component for our cards. As you can see in the above code, we have named it Card.js and have also imported it. We've also passed item as props so that we can use the data stored in the item in the card component.

This component will contain all our cards and the data which we will show dynamically in our App using the map function.

import React from "react";

const Card = ({ item }) => {            
           // destructuring props
  return (
    <>
      <div className="container-fluid">
        <div className="row justify-content-center">
          {item.map((Val) => {
            return (
              <div
                className="col-md-4 col-sm-6 card my-3 py-3 border-0"
                key={Val.id}
              >
                <div className="card-img-top text-center">
                  <img src={Val.img} alt={Val.title} className="photo w-75" />
                </div>
                <div className="card-body">
                  <div className="card-title fw-bold fs-4">
                    {Val.title} &nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;
                    {Val.price}
                  </div>
                  <div className="card-text">{Val.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default Card;

Our App with 10 cards will look this:

How to Make the Filter Component

There are many ways we can use the filter components to filter out the data which the user gets from the search results. But here, we will be making buttons for this purpose which will filter out the data based on the category of that food – like breakfast, lunch, dinner, and snacks.

We have to make a new array that will contain only the values of the key category and display them using the map method.

// spread operator will display all the values from our category section of our data while Set will only allow the single value of each kind to be displayed

  const menuItems = [...new Set(Data.map((Val) => Val.category))];

We're using the spread operator here so that every value we get by displaying the above array has the same UI, and also to display all 10 categories as buttons.

We use the Set() value so that only 3 or 4 values that are unique will be displayed and also to ensure that there are no repeated values.

We'll create a new component for these buttons that will be dynamically displayed using the map method. But this time we will use our newly formed array as it has all the categories stored in an array and will display them only once due to Set().

import React from "react";
import Data from "./Data";

const Buttons = ({ setItem, menuItems }) => {
  return (
    <>
      <div className="d-flex justify-content-center">
        {menuItems.map((Val, id) => {
          return (
            <button
              className="btn-dark text-white p-1 px-2 mx-5 btn fw-bold"
              key={id}
            >
              {Val}
            </button>
          );
        })}
        <button
          className="btn-dark text-white p-1 px-3 mx-5 fw-bold btn"
          onClick={() => setItem(Data)}
        >
          All
        </button>
       </div>
    </>
  );
};

export default Buttons;

Put this button component where you want to display the buttons. In our case, we have displayed buttons above our card component in app.js.

It’s time to add a filter in these buttons so that they can filter out dishes depending upon the category.

const filterItem = (curcat) => {
    const newItem = Data.filter((newVal) => {
      return newVal.category === curcat; 
            // comparing category for displaying data
    });
    setItem(newItem);
  };

The filter method filters out the data depending upon the category of that object.

Using the onClick() event handler, we can attach this filter to our buttons:

import React from "react";
import Data from "./Data";

const Buttons = ({ filterItem, setItem, menuItems }) => {
  return (
    <>
      <div className="d-flex justify-content-center">
        {menuItems.map((Val, id) => {
          return (
            <button
              className="btn-dark text-white p-1 px-2 mx-5 btn fw-bold"
              onClick={() => filterItem(Val)}
              key={id}
            >
              {Val}
            </button>
          );
        })}
        <button
          className="btn-dark text-white p-1 px-3 mx-5 fw-bold btn"
          onClick={() => setItem(Data)}
        >
          All
        </button> 
       </div>
    </>
  );
};

export default Buttons;

Wrapping Up

There are many ways we can use a filter component to reduce the time our user wastes searching for ideal results in our apps.

There are only 10 objects in the array we have used in this app, but many times we get our data from API, where there can be tons of data. In these cases, only a single search isn't often ideal to give exact results, so we use filters to help.

You can see the whole code in the GitHub Repo, and you can check out how these filter buttons work by going through a live link of the app.

You can go through my other projects as well:

1. How to make a Pagination component in React using Hooks

2. How to make a Dictionary App in React using Hooks

3. How to host a React App on GitHub Pages with a Custom Domain