DEV Community: Jaisurya

React State

Jaisurya — Wed, 30 Sep 2026 04:30:26 +0000

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

A state must be kept as simple as possible. It can be set by using the setState() method and calling setState() method triggers UI updates. A state represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly. To set an initial state before any interaction occurs, we need to use the getInitialState() method.

For example, if we have five components that need data or information from the state, then we need to create one container component that will keep the state for all of them.

Defining State

To define a state, you have to first declare a default set of values for defining the components initial state. To do this, add class constructor which assigns an initial state using this.state. The this.state property can be rendered inside render() method.

Example

import React, {Component} from 'react';
class App extends React.Component{
   constructor(){
      super();
      this.state = { displayBio:true };
      }
      render(){
         const bio = this.state.displayBio ? (
            <div>
               <p><h3>A developer community is a collaborative network where programmers, engineers, and tech enthusiasts share knowledge, solve coding problems, and build software together.<h3><p>
            <div>
            ):null;
            return(
               <div>
                  <h1> Welcome to Dev community <h1>
                  {bio}
               </div>
            );
       }
}
export default App;

To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.

React Components

Jaisurya — Tue, 29 Sep 2026 13:40:48 +0000

Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the traditional DOM structures, and making changes in them was a very challenging task. If any mistake found, it manually searches the entire application and update accordingly. The component-based approach was introduced to overcome an issue. In this approach, the entire application is divided into a small logical group of code, which is known as components.

A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which will be the final UI of your application.

Every React component have their own structure, method as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.

In ReactJS, we have mainly two types of components. They are

1.Functional components
2.Class components

Functional components:

In React, the function components are a way to write components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example.


function WelcomeMessage(props){
   return <h1>Welcome to the, {props.name}</h1>;
}

The functional component is also known as a stateless component because they do not hold or manage state. It can be explained in the below example.

Example

import React,{Component} from 'react';
class App extends React.Component{
   render(){
      return(
         <div>
            <First/>
            <Second/>
         </div>
      );
   }
}

class First extends React.Component{
   render(){
      return(
         <div>
            <h1>Dev Community</h1>
         </div>
      );
   }
}

class Second extends React.Component{
   render(){
      return(
         <div>
            <h2>One of the largest developer community</h2>
         </div>
      );
   }
}

export default App;

Class Components

Class Components are more complex than functional components. It requires you to extend from React. Component and create a render function which return a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function. Valid class component is shown in the below example.

class MyComponent extends React.Component{
   render(){
      return(
         <div>This is main component.</div>
      );
   }
}

The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.

Example

In this example, we are creating the list of unordered elements, where we will dynamically insert StudentName for every object from the data array. Here, we are using ES6 arrow syntax (=>) which looks much cleaner than the old JavaScript syntax. It helps us to create our elements with fewer lines of code. It is especially useful when we need to create a list with a lot of items.


import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"Abhishek"             
            },  
            {            
               "name":"Saharsh"             
            },  
            {    
               "name":"Ajay"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Student Name Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;

React and its features

Jaisurya — Wed, 23 Sep 2026 16:19:59 +0000

React is a JavaScript library for creating the Graphical User Interface (GUI) of web applications. It is used specifically for creating mobile application and single page web applications. The code structure in React is constructed in the form of components and class components. The functionality of React employs the Document Object Model (DOM), Virtual DOM, JSX (JavaScript XML), and a number of Lifecycle methods like 'render', 'shouldComponentUpdate', 'componentWillUnmount'.

Features of React

1.JSX

JSX or JavaScript XML, is an extension of the JavaScript language syntax. It allows developers to render components with syntax close to HTML. Even though React components can be constructed using pure JavaScript, JSX is employed because it is simple and simple to read. Babel is pre-processor that transforms HTML-like syntax in JavaScript files into normal JavaScript objects. This incorporation of HTML in JavaScript makes the code easier to read, enhances the performance of JavaScript, and assists in making the overall application more stable.

2.Virtual Document Object Model

React employs an in-memory data structure cache to calculate the difference between the old and new states of the DOM. It re-renders only the required changes rather than re-rendering the entire application. This selective updating process enhances speed and performance to great extent and decreases memory usage.

3.One-Way Data Binding

This feature enables a unidirectional flow of data. This type of mechanism enables more control over the application as the state is stored in specific stores, and other components can remain loosely couple. This structure enables the application to be more flexible and efficient.

4.Testability

In React, views are representation of the state, which dictates the behavior of the component. Therefore, changes can be introduced to the state, which passed to a ReactJS view in order to as certain the resulting output, actions, functions, and events. This simplifies the process of testing and debugging.

JavaScript Strings

Jaisurya — Wed, 23 Sep 2026 01:57:23 +0000

A string in JavaScript is a sequence of characters used to represent text. Strings can contain letters, numbers, spaces, symbol, and special characters.

Creating strings in JavaScript

JavaScript provides multiple ways to create strings. A string can be enclosed within single quotes (''), double quotes (""), or backticks (``). All three approaches create string values, but template literals offer additional feature such as string interpolation and multi-line strings.

Syntax

`javascript
let stringName = "string value";

`
Here:

let is used to declare the string variable.
stringName represents the name of the string variable.
"string value" is the text stored in the string. Example

`javascript
let message = "Welcome to Dev Community";
console.log(message);

//Output : Welcome to Dev Community

Explanation:

In the above example, we created a string variable named message and assigned a text value to it. The value is then displayed using the console.log() method.

JavaScript Promises

Jaisurya — Mon, 21 Sep 2026 11:45:52 +0000

A promise in JavaScript is an object that is used to represent the eventual completion or failure of an asynchronous operation.

With the help of promise in JavaScript, users can handle asynchronous operations in a more manageable and readable manner, if we compare it with traditional callbacks.

States of Promise

There are three states of Promise in JavaScript:

Pending: It is the initial phase, which represents that the asynchronous operations are still in progress.

Fullfilled: It indicates that the asynchronous operations has been completed successfully.

Rejected: It indicates that the operation has failed.

Syntax

The syntax of JavaScript promises is as follows:

let promise = new Promise(function(resolve, reject){
   //code to be executed
});

Parameters

**resolve: **It marks the promise as fulfilled and provides a result.

**reject: **It marks the promise as rejected with an error.

Example

const myPromise = Promise.resolve("Hello, Welcome to Dev Community!");
myPromise.then(message => {
   console.log(message);
});

//Output: Hello, Welcome to Dev Community!

JavaScript Array Methods

Jaisurya — Sun, 20 Sep 2026 14:46:25 +0000

JavaScript has its own set of methods built into the language that allow developers to efficiently interact with arrays. JavaScript allows us to do such operations as adding, removing, updating or getting elements, transforming, or iterating through arrays.

Array Basic Methods

1. Array toString() in JavaScript

This method fabricates an array in a string format separated by a comma. This approach does not alter the initial array and is significant for representing the content of the array in the form of a string.

Example code:

const names = ["Jaisurya", "Dinesh", "Ramesh"];
console.log("Arrays to String is", names.toString());
//Output: Array to String is Jaisurya, Dinesh, Ramesh

Explanation:

In the above example, we defined a variable named names using the const keyword. We assigned it an array consisting of names. We utilized the toString() method to transform the array into a single string and logged the result in the console.

2.Array at() in JavaScript

It returns the element at a specified index in an array. It can be constructed for both positive and negative indices. Indices can be positive, which begin at the start ( 0-based ), and can be negative, which count from the end of the array.

Example code:

const names = ["Jaisurya", "Ramesh", "Dinesh"];
console.log("Second Element is", names.at(1));//Access second element
console.log("Last Element is", names.at(-1));//Access last element

//Output:
//Second Element is Ramesh
//Last Element is Dinesh

Explanation:

In the above example, we defined a variable named names using the const keyword and assigned it an array consisting of names. By utilizing the at() method of array, we accessed the second and last element from the array and logged them in the console.

3.Array forEach() in JavaScript

The forEach() method is a built-in method that is utilized to call a function for each element present in the array. It neither returns a new array nor modifies the original array, but it is utilized for iteration.

Example code:

const seasons = ["spring", "summer", "winter", "autumn"];

seasons.forEach((season) => console.log(season));

//Output:
//spring
//summer
//winter
//autumn

Explanation:

In the above code, we defined a variable named season and assigned it an array consisting of season names. By utilizing the forEach() method, we return every element of the array and log the output in the console.

JavaScript Objects

Jaisurya — Fri, 18 Sep 2026 01:29:37 +0000

In JavaScript, an object is a variable that can hold multiple values. It is a location where a collection of values is stored. Objects are among the most basic data types in JavaScript. Every object contains properties and types, which are a single unit. Objects are not primitive, unlike primitive data types.

For instance, take a football. A football has properties like weight, shape, color, and design. In this case, the football is an object, and its weight and shape are its properties.

Similarly, in JavaScript, objects have properties that define their nature. An object can hold various types, like Strings, Numbers, Booleans, Arrays, Function, etc.

Syntax of Objects in JavaScript

const myObject = {
key1: value1,
key2: value2,
//more key-value pairs
};

Explanation:

Curly braces are used to demarcate the start and termination of an object literal.
Inside these braces, you define key-value pairs separated by commas.
Every key is a string or symbols
A colon comes after each key, followed by its value.
They may be of any data type like stings, numbers, boolean, arrays, functions, or other objects.

Example code:

let person = {
   name:'Jaisurya',
   age: 23,
   city: 'Chennai'
};

Arrow function in JavaScript

Jaisurya — Thu, 17 Sep 2026 06:10:07 +0000

In JavaScript, arrow functions provide a short and simple way to define functions using the => symbol, which offers implicit return values and lexical scoping that makes them a popular choice to write cleaner and more readable code.

In JavaScript, an arrow function can be written with the use of the => symbol, which makes than shorter and compact.

Arrow functions in JavaScript don't have their own this, and they need to inherit this from the surrounding context.

Arrow functions only have a single expression that returns implicit, which makes the code more concise.

Syntax:

The arrow function syntax provides a shorter and more concise way to write functions in JavaScript.

(const functionName = (parameters) => {  
    // code to be executed  
};

Parameter: The parameters the function take are similar to the regular function expressions.

=>: This the fat arrow, which is used to separate parameters from the function body.

Function body: The code that the function executes is also similar to the regular function expressions.

Example code:

const add = (a, b) => {  
    return a + b;  
};  

console.log(add(10, 20));  

//Output: 30

Functions in JavaScript

Jaisurya — Thu, 03 Sep 2026 05:32:26 +0000

A function is a reusable, self-contained block of code designed to perform a specific task. Instead of writing the same logic multiple times throughout a program, you define it once inside a function and run or call it whenever needed.

Think of a function like a kitchen blender: you put ingredients in (inputs), it performs a specific operation (processing) and it produces a smoothie (output).

Core components of a function:

Name: A descriptive identifier used to call the function (e.g., calculate_num or send_email).

Parameters(Inputs): Variables declared in the function definition that accept values (known as arguments) passed into it.

Body: The block of code that executes when the function is invoked.

Return value(Output): The final result the function sends back to the part of the program that called it.

// 1. Define the function
function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
}

// 2. Call the function with different values
const shirtTotal = calculateTotal(25, 0.08); // 8% tax on a $25 shirt
console.log(shirtTotal); // Output: 27

const shoesTotal = calculateTotal(80, 0.08); // 8% tax on $80 shoes
console.log(shoesTotal); // Output: 86.4

JavaScript Switch Statement

Jaisurya — Sat, 29 Aug 2026 14:59:22 +0000

In JavaScript, a switch case is a conditional statement that is used to provide a way to execute different blocks of code based on the value of an expression.

The switch statement is used to execute one block of code from multiple alternatives based on the value of an expression. It provides an alternative to multiple if else if statement when comparing a single value against several possible options.

Here is the syntax of using switch statement:

switch(expression){
   case value1:
      //code to be executed
      break;

   case value2:
      //code to executed
      break;

   default:
      //code to be executed if no case matches
}

Explanation:

expression: The value or variable that is evaluated once and compared with each case value.
case value1, case value2: These define the possible values that are compared with the expression. If a match is found, the corresponding code block is executed.
break: Terminates the current case and exits the switch statement. Without break, execution continues to the next case.
default: An optional block that executes when none of the case values match the expression. It works similarly to the else block in an if...else statement.

Javascript If-else Statement

Jaisurya — Fri, 28 Aug 2026 01:45:00 +0000

The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms of if statement in JavaScript.

1.if statement
2.if else statement
3.if else if statement

1.JavaScript if statement

It evaluate the content only if expression is true.

//Syntax
if(expression){  
//content to be evaluated  
}  

//Example code
<script>  
let a=20;  
if(a>10){  
document.write("value of a is greater than 10");  
}  
</script>  

//Output: value of a is greater than 10

2.Javascript if else statement

It evaluates the content whether condition is true of false.

//Syntax
if(expression){  
//content to be evaluated if condition is true  
}  
else{  
//content to be evaluated if condition is false  
}  

//Example
<script>  
let a=20;  
if(a%2==0){  
document.write("a is even number");  
}  
else{  
document.write("a is odd number");  
}  
</script>  

//Output: a is even number

3.JavaScript if else if Statement

It evaluates the content only if expression is true from several expressions.

//Syntax

if(expression1){  
//content to be evaluated if expression1 is true  
}  
else if(expression2){  
//content to be evaluated if expression2 is true  
}  
else if(expression3){  
//content to be evaluated if expression3 is true  
}  
else{  
//content to be evaluated if no expression is true  
}  

//Example

<script>  
let a=20;  
if(a==10){  
document.write("a is equal to 10");  
}  
else if(a==15){  
document.write("a is equal to 15");  
}  
else if(a==20){  
document.write("a is equal to 20");  
}  
else{  
document.write("a is not equal to 10, 15 or 20");  
}  
</script> 

//Output: a is equal to 20

Javascript Objects

Jaisurya — Thu, 27 Aug 2026 13:40:52 +0000

For instance, take a football. A football has properties like weight, shape, color, and design. In this case, the football is an object, and its weight and shape are its properties.

Similarly, in JavaScript, objects have properties that define their nature. An object can hold various types, like Strings, Numbers, Booleans, Arrays, Functions, etc.

Syntax of Object in JavaScript

// Object literal syntax  
const myObject = {  
  key1: value1,  
  key2: value2,  
  // more key-value pairs...  
};

Explanation:

Curly braces are used to demarcate the start and termination of an object literal.
Inside these braces, you define key-value pairs separated by commas.
Every key is a string (or symbol in ES6+).
A colon comes after each key, followed by its value.
They may be of any data type like strings, numbers, booleans, arrays, functions, or other objects.