Filter Image Gallery using React JS for beginner

If you are new to React JS and want to create a filterable image gallery, you’ve come to the right place. In this article, we will walk you through the easy way to create an image gallery using React JS with the ability to filter images based on their categories.

First, make sure you have Node.js and npm installed on your machine. You can check if you have them by running the following commands in your terminal:

node -v
npm -v

If you don’t have Node.js or npm installed, you can download and install them from https://nodejs.org/.

Once you have Node.js and npm installed, you can create a new React app using the following command:

npx create-react-app filterable-image-gallery

This command will create a new directory called `filterable-image-gallery` with all the necessary files and folders for a React app.

Next, navigate to the newly created directory and install the following packages using npm:

cd filterable-image-gallery
npm install react-bootstrap
npm install react-images-upload

Now, open your favorite code editor and create a new file called `ImageGallery.js` in the `src` folder of your React app. In this file, you can write the following code to create a basic image gallery component:

“`javascript
import React, { useState } from ‘react’;
import ImageUploader from ‘react-images-upload’;

const ImageGallery = () => {
const [images, setImages] = useState([]);

const onDrop = (picture) => {
setImages([…images, picture]);
};

return (

);
};

export default ImageGallery;
“`

In this code, we are using the `useState` hook to create a state variable `images` that will store the images uploaded by the user. We are also using the `react-images-upload` package to create an image uploader component.

Now, you can use the `ImageGallery` component in your `App.js` file to render the image gallery on the screen:

“`javascript
import React from ‘react’;
import ImageGallery from ‘./ImageGallery’;

function App() {
return (

);
}

export default App;
“`

Finally, you can run your React app using the following command:

npm start

This will start a development server and open your React app in a new browser window. You will see the basic image gallery with the ability to upload and display images.

Now that you have a basic image gallery set up, you can add filtering functionality to it by creating a dropdown menu to filter images by their categories. You can use the `react-bootstrap` package to create a responsive and mobile-friendly dropdown menu. Just install the package using the following command:

npm install react-bootstrap

Then, you can use the `Dropdown` component from `react-bootstrap` to create a dropdown menu in your `ImageGallery.js` file:

“`javascript
import React, { useState } from ‘react’;
import ImageUploader from ‘react-images-upload’;
import { Dropdown } from ‘react-bootstrap’;

const ImageGallery = () => {
const [images, setImages] = useState([]);
const [filter, setFilter] = useState(‘all’);

const onDrop = (picture) => {
setImages([…images, picture]);
};

const handleFilterChange = (event) => {
setFilter(event.target.value);
};

return (

);
};

export default ImageGallery;
“`

In this code, we are using the `useState` hook to create a state variable `filter` that will store the selected category for filtering. We are also using the `Dropdown` component from `react-bootstrap` to create a dropdown menu with options to filter images by their categories.

Now, when you run your React app again using `npm start`, you will see the image gallery with a dropdown menu to filter images by their categories. You can upload images and assign them to different categories, and then use the dropdown menu to filter the images based on their categories.

That’s it! You have successfully created a filterable image gallery using React JS. Feel free to customize the gallery and explore more features of React to enhance the user experience.