How we can use forEach loop in React JS

I am explaining you, how to use foreach loop in React JS. the foreach loop is considered as it is an array, it will iterate each item from an array with help of a callback. I hope you have knowledge of javascript fundamental. below is the example of javascript forEach loop –

Example :

const exampleArray = [34, 40, 48, 57, 70]

exampleArray.forEach((el)=>{
    console.log(el)
});

/*
Output:
34
40
48
57
70
*/

you can see that to implement the forEach() loop we don’t need to follow any special rules. we implementing this loop in a react application is a bit different. I am giving you example of forEach() loop and how you can use it in react application.

Example :

import React from 'react';
import "./index.css";


function App() {

  const cityInformation = ['Dewas', 'Indore', 'Khandwa', 'Rau'];

  const cities = [];

  cityInformation.forEach((data) => {
    cities.push(<h4 className='city_name'>{data}</h4>)
  })

  return (
    <div className='container'>
      {cities}
    </div>
  )
}

export default App;

Results :

Dewas
Indore
Khandwa
Rau

Azhar Shaikh

Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket,  jQuery, Ajax, Javascript and ReactJS.