Frontendroom
Tools
Categories
ShortsAbout
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:

How to perform union, intersection, and difference of arrays in Javascript?

How to perform union, intersection, and difference of arrays in Javascript?

Read
How to calculate the intersection of multiple arrays in JavaScript

How to calculate the intersection of multiple arrays in JavaScript

Read
Mastering the semantic versioning syntax in package.json: A Beginner's Guide

Mastering the semantic versioning syntax in package.json: A Beginner's Guide

Read
How do Unary Plus and Unary Negation operators behave in Javascript?

How do Unary Plus and Unary Negation operators behave in Javascript?

Read

Privacy Preferences

We and our partners share information on your use of this website to help improve your experience. For more information, or to opt out click the Do Not Sell My Information button below.