Posted on: February 19, 2023|Amrish Kushwaha

For loop and active state in UI

For loop and active state in UI

One of the common patterns or UI elements is a list of items with an active state in one of the element and when you click on a different item, that item goes in the active state. This article will explain how to implement this kind of UI element.

Logic: way to develop

Pseudo HTML skeleton

<div (click)="set current index as selected index"
for-loop="iterate over each elements of array"
class.active="selectedIndex is equal to currentIndex">
<div>item[i]</div>
</div>

In order to implement it, you will need:

  • for loop which loops through array
  • click event for every element
  • active state will be set to that element which are clicked, in this case I am using active class.

Example :

  • in Angular
  • in React
  • in Plain Javascript

Example: for loop and active state in angular

demo.component.html

<div class="list-container" *ngIf="listOfItems">
<div
class="item"
(click)="setIndex(i)"
[class.active]="selectedIndex === i"
*ngFor="let item of listOfItems; let i = index"
>
<span>{{item.num}}</span>
<p>{{item.content}}</p>
</div>
</div>

demo.component.css

.item {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 16px;
color: green;
cursor: pointer;
}
.item span {
border: 1px solid green;
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.active span {
background-color: green;
color: white;
}
.active p {
font-weight: 600;
}

demo.component.ts

import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-demo",
templateUrl: "./demo.component.html",
styleUrls: ["./demo.component.css"]
})
export class DemoComponent {
listOfItems = [
{
num: 1,
content: `I am Item #1`
},
{
num: 2,
content: `I am Item #2`
},
{
num: 3,
content: `I am Item #3`
}
];
INITIAL_INDEX = 0;
selectedIndex = this.INITIAL_INDEX;
constructor() {}
ngOnInit() {}
setIndex(item) {
this.selectedIndex = item;
}
}

That's all

Here is the result:

Example: for loop and active state in react

listItems.js

import React, { useState } from "react";
export default function ListItems() {
const listOfItems = [
{
num: 1,
content: `I am Item #1`
},
{
num: 2,
content: `I am Item #2`
},
{
num: 3,
content: `I am Item #3`
}
];
const INITIAL_INDEX = 0;
const [selectedIndex, setIndex] = useState(INITIAL_INDEX);
return (
<div className="list-container">
{listOfItems.map((item, index) => {
return (
<div
className={`item ${selectedIndex === index ? "active" : ""}`}
key={item.num}
onClick={() => setIndex(index)}
>
<span>{item.num}</span>
<p>{item.content}</p>
</div>
);
})}
</div>
);
}

and its style.css

.item {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 16px;
color: green;
cursor: pointer;
}
.item span {
border: 1px solid green;
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.active span {
background-color: green;
color: white;
}
.active p {
font-weight: 600;
}

and the result is

Example: for loop and active state in plain HTML, CSS and Javascript

html

<div class="list-container" id="listContainer">
<div class="item active">
<span>1</span>
<p>I am Item #1</p>
</div>
<div class="item">
<span>2</span>
<p>I am Item #2</p>
</div>
<div class="item">
<span>3</span>
<p>I am Item #3</p>
</div>
</div>

css

.item {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 16px;
color: green;
cursor: pointer;
}
.item span {
border: 1px solid green;
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.active span {
background-color: green;
color: white;
}
.active p {
font-weight: 600;
}

and javascript

const listContainer = document.getElementById("listContainer");
const items = listContainer.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
items[i].addEventListener("click", function () {
let current = listContainer.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

Here is the result:

I hope that you like the article.

Keep coding and keep learning and keep building stuffs...

About author:

Amrish Kushwaha

Amrish Kushwaha

I am Amrish Kushwaha. Software Engineer, Maker, Writer. I am currently focused on frontend development with curiosity of building end to end software system. Currently I am working at Rafay Systems. I love to write as well as build side projects when I am free.

Related category articles: