Hello Developers, In this tutorial, You will learn to create a dynamic Portfolio gallery with filtering by category in react js & bootstrap4 with some simple steps that are very easy to understand.
Here, I have created Portfolio Image Gallery with four category tabs like Frontend, Backend, Database & programming. When you click the frontend tab then you will get data only from the frontend category. In this way, you can perform the same for other categories.
Dynamic Portfolio Gallery with Filtering by Category using React Js
n this tutorial, I have created a Portfolio Gallery with filtering using functional components. Once, you learn it, you can easily create it yourself using the class component.
Learn Also –
Create React Charts in React Js
Create a Simple React Todo App
Create Increment Decrement Counter in React Hooks
Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure
reactapp/ |__public/ | |__images/ |__src/ | | | portfolio-gallery/ | |__Data.js | |__Gallery.js | |__Items.js | |__Tabs.js
I have used bootstrap 4 to create a responsive weather app. So, You should run the following command
npm install bootstrap
Also, you have to import it into the App.js
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
For more information, you can learn How to use Bootstrap in React Js
1. Create Gallery Data
First of all, Create some data for each category in json array formate in Data.js. This data will be filtered in the portfolio gallery based on clicking the category tab.
File Name – Data.js
const data =[
{
id:1,
image:"./images/html.jpg",
title:"HTML Tutoril",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"frontend",
},
{
id:2,
image:"./images/css.jpg",
title:"CSS Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"frontend",
},
{
id:3,
image:"./images/javascript.jpg",
title:"JS Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"frontend",
},
{
id:4,
image:"./images/react.jpg",
title:"React Js Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"frontend",
},
{
id:5,
image:"./images/bootstrap.jpg",
title:"Bootstrap Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"frontend",
},
{
id:6,
image:"./images/php.jpg",
title:"PHP Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"backend",
},
{
id:7,
image:"./images/node-js.jpg",
title:"Node.js Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"backend",
},
{
id:8,
image:"./images/asp.jpg",
title:"ASP Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"backend",
},
{
id:9,
image:"./images/sql.jpg",
title:"SQL Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"database",
},
{
id:10,
image:"./images/mongodb.jpg",
title:"Mongo DB Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"database",
},
{
id:11,
image:"./images/c.jpg",
title:"C Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"programming",
},
{
id:12,
image:"./images/c-plus.jpg",
title:"C++ Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"programming",
},
{
id:13,
image:"./images/java.jpg",
title:"Java Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"programming",
},
{
id:14,
image:"./images/python.jpg",
title:"Python Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
category:"programming",
},
{
id:15,
image:"./images/go.jpg",
title:"Go Tutorial",
description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
category:"programming",
},
]
export default data;2. Create Portfolio Gallery Component
Step -1: Create a Gallery functional component and return some line of HTML code with bootstrap 4 class in the form of JSX.
Step – 2: import a Tabs component from the “./Tab” and also return it with its syntax like <Tab /> within the Gallery component.
Step – 3: Also, import a Items component from the “./Items” and also return it with its syntax like <Items /> within the Gallery component.
Step – 4: Import Data from the “./Data” and declare a react state and pass Data into the useState() like tha following code
const [data, setData] = useState(Data);
and then pass data to the <Items /> component as props.
Step – 5: Declare an event handler as an arrow function filterCategory with const keyword and pass a parameter category then write some line of code within it by using the following points –
- If a category is equal to “all” then pass Data into the setDta and then return; only.
- Apply javascript filter function on Data by assigning to the filterCategory and return value if Tab category (coming after clicking Gallery Tab) is exactly matched with category of Data
- Also, pass filtered category data filteredData into the setData()
- After that, pass the filterCategory as props into the <Tabls> Component
Steps – 6: Apply filter() function on the Data by assigning to the categoryData and return categories
Step -7: pass the categoryData into the new set() method with the spread operator (…)to convert it into an object set and also, also add “all”. then assign it to the tabsData.
Step – 8: After that, pass the tabsData into the <Tabs /> component
File Name – Gallery.js
import Tabs from "./Tabs";
import Items from "./Items";
import Data from "./Data";
import { useState } from "react";
function Gallery(){
const [data, setData] = useState(Data);
const categoryData = Data.map((value)=>{
return value.category
});
const tabsData= ["all", ...new Set(categoryData)];
const filterCategory=(category) =>{
if(category=="all"){
setData(Data);
return;
}
const filteredData = Data.filter((value)=>{
return value.category == category;
})
setData(filteredData);
}
return(
<div className="container">
<div className="row">
<div className="col-sm-1">
</div>
<div className="col-sm-10">
<Tabs filterCategory={filterCategory} tabsData={tabsData}/>
<Items data={data} />
</div>
<div className="col-sm-1">
</div>
</div>
</div>
)
}
export default Gallery;3. Create Gallery Items Component
To create a gallery Items Component, you will have to implement the following steps –
Step-1: First of all create an Items component and pass a props data with curly bracket and also return some lien of HTML code with bootstrap4 classes in the form of JSX,
Step-2: Apply javascript map() function to the data and print the galley title & description within return() of the Items compoent.
Step-3: At last, export the Items component
File Name – Items.js
function Items({data}){
return (
<div className="row ">
{
data.map((value)=>{
const {id, image, title, description} = value;
return (
<div className="col-sm-3 my-3" key={id}>
<div className="card bg-light text-center">
<img src={image} className="img-fluid" style={{height:"200px"}}/>
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
)
})
}
</div>
)
}
export default Items;4. Create Gallery Tabs Component
To create a gallery Tabs Component, you will have to implement the following steps –
Step-1: First of all create a Tabs component and pass two props filterCategory & tabsData with curly bracket and also return some lien of HTML code with bootstrap4 classes in the form of JSX,
Step-2: Apply javascript map() function to the tabsData and print the galley category within the <button> tag
Step-3: also, declare a callback arrow function with the onClick event and call the filterCategory()
Step-4: At last, export the Tabs component
File Name – Tabs.js
function Tabs({filterCategory, tabsData}){
return(
<>
<div className="text-center my-4">
{
tabsData.map((category, index)=>{
return (
<button type="button" className="btn btn-outline-primary mx-2 text-capitalize" onClick={()=> filterCategory(category)} key={index}>{category}</button>
)
})
}
</div>
</>
)
}
export default Tabs;5. Render Portfolio Gallery Component
To render portfolio gallery components, You should import the Gallery component into the App component and return <Gallery />.
File Name – App.js
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Gallery from "./portfolio-gallery/Gallery";
function App() {
render(){
return (
<Gallery />
);
}
}
export default App;6. Test Portfolio Gallery Yourself
Now, you can test the portfolio gallery yourself by running the React App with the following command
npm start
After that, you can see the portfolio gallery by opening the following URL in your web browser
http://localhost:3000/