Learners Store

If we want to add a constant value to each element in an array(assuming the array contains numbers), we can use the ‘map’ method.

const array = [1, 2, 3, 4];
const constantValue = 7;

const newArray = array.map(element => element + constantValue);

console.log(newArray); // Output: [8, 9, 10, 11]

To set the focus on an element with a specific ‘data-testid’ , we can use the ‘useEffect’ hook to find the element and then call its ‘focus’ method.

import React, { useEffect } from 'react';

const MainMenu = () => {

 useEffect(() => {
 // Locate the required element with data-testid
 const mainMenuElement = document.querySelector('[data-testid="main-menu"]');
 
 if(mainMenuElement && mainMenuElement instanceof HTMLElement) {
   mainMenuElement.focus();
  }
 }, []);

 return(
  <div
   data-testid="main-menu"
   tabIndex="0" // Ensure the element can receive focus.
  >
   Main Menu content
   <div>Other Content</div>
  </div>
 );
}

export default MainMenu;

• We are checking mainMenuElement ia an instance of ‘HTMLElement’ or not and it tells TypeScript that ‘mainMenuElement’ has the ‘focus’ method.
• The ‘tabIndex=”0″ attribute is added to ensure that the ‘div’ can receive focus.

Redux Saga is used in React applications to handle complex side effects, such as Asynchronous data fetching more efficiently. Here are few reasons why we might need Redux Saga :

Improved Side Effect Management: Redux-Saga makes it easier to manage side effects like API calls and background processes which leads to more maintainable code.

Improved Performance: By handling side effects in a centralized way, Redux-Saga can improve application performance by avoiding unnecessary requests and reducing the number of requests made.

Better Readability: By using generator functions, it provides a cleaner and more readable syntax for handling asynchronous operations compared to traditional callbacks or promises.

Manage complexity: All side effects can be managed in one place, making the logic easier to test and maintain.

Cancelable Tasks: It allows you to cancel tasks, which is beneficial in scenarios like debouncing or when the component unmounts.

Declarative Effects: The effects in Redux Saga are declarative, meaning you can easily understand what the saga is doing just by reading the code.

Decoupling: Redux Saga helps in decoupling the business logic from components and making it easier to reuse logic & reduce coupling between components.

Overall, Redux-Saga is used to make application development more efficient, scalable and maintainable.

By using luxon we can define the different time formats as follows.

const customisedTime = (timeStamp) => {
    const formatTime = "MM/dd/YYYY hh:mm a";
    let formattedDate = timeStamp.toFormat(formatTime);
}

//Example output is : 12/24/2024 09:46 PM

We can convert the above AM/PM to am/pm by the following code

const customisedTime = (timeStamp) => {
    const formatTime = "MM/dd/YYYY hh:mm a";
    let formattedDate = timeStamp.toFormat(formatTime);
    formattedDate = formattedDate.replace(/AM/PM/, date => date.toLocaleLowerCase());
}

//Example output is : 12/24/2024 09:46 pm

in the same we can write different time formats as follows

const formatTime = "MM/dd/YYYY hh:mma"; // 12/24/2024 09:46PM
const formatTime = "dd/MM/YYYY hh:mma"; // 24/12/2024 09:46PM
const formatTime = "MM/dd/YYYY,  hh:mm a"; // 12/24/2024, 09:46 PM

Suppose, if you want to create an Array of length ‘5’ and fill it with zeros then we can write the following code.

const n = 5; // Assume 5 as the Length of the array
const array = new Array(n).fill(0);

console.log(array); // Output: [0, 0, 0, 0, 0]

In the same way, If we want to create an Array of length ‘3’ and fill it with the text ‘javascript’ then we can write the following code.

const n = 3; // Assume 3 as the Length of the array
const array = new Array(n).fill('javascript');

console.log(array); // Output: ['javascript', 'javascript', 'javascript']