for loop in react

How to Use For Loop in React with Example

This article will give you an example of use for loop in react using the list provided. We will look at an example of a reaction native loop array on offer. is a simple example of how to use a loop in reaction js. you will learn how to use the loop in reaction js. You just need some step on how to use the foreach loop on the reactjs.

In this tutorial, I will give you a simple how to use for loop in react with example using an array in reaction app. if you are looking for a loop in reaction, foreach in reaction and a map in reaction where I will help you how to disassemble the list of reaction js.

Read Also :  React API Call Using Fetch

we always look for the foreach loop and loop of the same members but we use a map to use your loop of the same members. so let’s take a map for traditional response.

I will give you two examples one reaction loop with a single dimensional array and another loop with many similar features in the reaction app.

Read Also :  Forwarding Refs in React js Example

Example : 1  use for loop in react

App.js

import React from 'react';

function App() {
  const myArray = ['Dharmik', 'Sanket', 'Fenil', 'Ved', 'Shlok'];

  return (
  <div className="container">
  <h1>React Map Loop Example - web-tuts.com</h1>

    {myArray.map(name => (
     <li>
     {name}
    </li>
   ))}

</div>
);
}

export default App;

Example : 2 use for loop in react

Index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class Demo extends Component {
  state = {
    value : null
  }

  componentDidMount() {
    fetch('https://reqres.in/api/users?page=2')
    .then(response => response.json())
    .then(json => this.setState({value : json.data}));
  }

  

  render() {
    return (
      <table border="1">
          {
            this.state.value?
            this.state.value.map((data) =>
            <tr>
              <td>{data.id}</td>
              <td>{data.email}</td>
              <td><img src={data.avatar} alt={data.first_name} /></td>
            </tr>
            ):""
          }
      </table>
    )
  }
}

ReactDOM.render(<Demo />,document.getElementById("root"));