There are mainly three types of for loops in JavaScript:

1. for loop: A for loop allows you to execute a block of code repeatedly for a specified number of times.
2. for…in loop: A for/in loop allows you to iterate over the properties of an object, executing the loop body once for each property.
3. for…of loop: A for/of loop allows you to iterate over the values of an iterable object, executing the loop body once for each value.

Consider the following object array. Suppose we want to iterate over the users array, run some time consuming task on each iteration before logging the user object to the console.

const users = [
    {
        id: 1,
        name: 'Alan',
    },
    {
        id: 2,
        name: 'Joel',
    },
    {
        id: 3,
        name: 'Triss',
    }
];

To use await in a for loop, you must mark the loop function as async, and then use await inside the loop to wait for each asynchronous operation to complete before moving on to the next iteration.

In the following example, the code is same for each type of the loops except the syntax of the loop method.

Async await with for loop

async function randomWait() {
    await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 100)));
    return;
}

async function printUser() {
    for(let i=0; i < users.length; i++) {
        // Wait for some time consuming task to finish
        await randomWait();
        console.log(users[i]);
    }
}

printUser();

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

Async await with for…in loop

async function printUser() {
    for(const index in users) {
        await randomWait();
        console.log(users[index]);
    }
}

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

Async await with for…of

async function printUser() {
    for(const user of users) {
        await randomWait();
        console.log(user);
    }
}

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

This code defines two async functions: randomWait() and printUser().

randomWait() uses the await keyword to pause execution for a random amount of time, chosen using Math.random() and setTimeout(). Once the timer expires, the Promise resolves and the function returns.

printUser() is an async function that iterates over an array called users. For each element of the array, it first calls randomWait() to simulate some time-consuming operation, then prints the element to the console using console.log().

In the result, you can see that the data is printed in the sequential order in each of the three for loops.

Caveats

Using await inside a loop can potentially slow down the loop significantly, especially if the operations being awaited are time-consuming. In some cases, it might be more efficient to use Promise.all() to run multiple promises in parallel rather than awaiting them one at a time in a loop.

The post How to use Async Await with For Loop in Javascript & Typescript appeared first on Mithle.sh.

Parent-to-Child

Passing data from parent to child component is very straightforward. You need to define props on the child component and then pass the values to it from the parent component. In the following example, we are rendering the avatar component (child) from the menu component(parent) by passing a criminal object to it.

Child Component

interface IAvatarProps {
    avatarUrl: string;
    alt: string;
    title: string;
}
const Avatar = (props: IAvatarProps) => {
  return (
    <img 
        src={props.avatarUrl} 
        title={props.title} alt={props.alt} 
        className="avatar" 
    />
  );
};

export default Avatar;

Parent Component

const criminal = {
        avatar: 'https://hindugenocide.com/islamic-jihad/9000-hindus-converted-in-madrasa/',
        name: 'Pir Ayub Jan Sarhandi'
    };
const Menu = () => {
    return (
        <Menu>
          <Avatar 
              avatarUrl={criminal.avatar} 
              title={criminal.name} 
              alt="Hindu Genocide" 
          />
        </Menu>
    );
};

export default Menu;

Child-to-Parent

To pass the data from the child to its parent, we need to first define a callback function on the parent component which would then be passed via props on the child component. The child component would then call that function to pass data to the parent component.

For example, let us create a child component called GenocideCard which links to an article on Mirpur Massacre. We want that when this card is clicked, the article url should be passed to the parent component from where it is rendered.

1. Define a callback function on the parent component called handleGenocideCardClick that accepts a parameter called articleUrl.
2. Pass that function in the onCardClick prop on the child component.
3. On the child component, we execute the callback function passed from the parent component when the <img> tag is clicked. The parameter of the callback function is passed as data to the parent component.

Parent Component

const handleGenocideCardClick = (articleUrl) => {
    console.log("You can read about this massacre at: " + articleUrl);
}

const Layout = () => {
  return (
        <Grid>
          <GenocideCard onCardClick={handleGenocideCardClick}/>
        </Grid>
    );
};

export default Layout;

Child Component

interface IGenocideCardProps {
    onCardClick: any;
}
const HinduMassacre = {
      name: "Mirpur Massacre"
      image: "https://www.dailyexcelsior.com/wp-content/uploads/2020/11/1-176.jpg",
      url: "https://hindugenocide.com/islamic-jihad/mirpur-massacre-of-hindus-and-sikhs-1947/"
}
const GenocideCard = (props: IGenocideCardProps) => {
  return (
  <div className="card">
    <img 
        src={HinduMassacre.image} 
        title={HinduMassacre.name} 
        alt="Hindu Genocide" 
        onClick={() => props.onCardClick(HinduMassacre.url)} 
    />
    <span class="text-red-400 font-medium">{HinduMassacre.name}</span>
  );
};

export default GenocideCard;

The post How to Pass Data between Child and Parent Components in React appeared first on Mithle.sh.