Hello Everyone,
How are you guys, I hope members of Steem alliance will be well and good, by the grace of God, I am also feeling well. My responsibility in this community is as a development manager. I have started the consistently tutorial base program to spread the knowledge of programming and development.
In the last post, I shared the knowledge about React Redux. In this tutorial, I have selected the topic “Array Loop in React Js”. after the successful completion of react I will design a front end of steemit with extra features by using SDS API and steem js library.
Loop Array in React JS
React js make user interface with the help of javascript. basically, in react js we use map() function to do the array loop. map() function is an array that generate another array once we use it. This new array is define on the basis callback function of the map() function. we can implement any logic in a callback function in map(), call back funtion are used as an argument.
When we make webiste by using react js. then it is very impotant to know and handle the array data on the base of our requirement. Array loop means to perform any operation with every element of array. in react js we use the array loop with jsx to generate the dynamic contents etc. in array, we always use loop / foreach loop. we will understand easily with the help of syntax.
Syntax
array.map((element, index) => {
// it will operate of every element
return modificationElement;
});
there are loop things in above syntax. i will explain one by one.
- Array: The array that we want to loop.
- Element: It will current element of array.
- index: It is the number of current element.
- modificationElement: It is the element after performing the modification on element.
Create a new file called "App.js"
import React from 'react';
function ArrayLoop() {
const numbers = [1, 2, 3, 4, 5,6,7,8,9,10];
const doubledNumbers = numbers.map((number, index) => {
return number * 5;
});
}
export default ArrayLoop
The above example will show that we are multiplyinh the every elemenet of 'numbers' with 5. you can see that we are passing the every element of 'numbers' to callback function of map() function. map() function make a new array, in which it store the data of numbers after multiplying with 5. i hope you will understand by focusing and consuntration. for any further query, please contect me on discord or in the comment section below.
Please cast witness vote to @bangla.Witness or set proxy to @rme.
_
Vote @bangla.witness as witness
Set Proxy @rme as proxy
Special Thanks.
Cc: @rme
Cc: @hungry-griffin
Cc: @stephenkendal
Thanks for giving your precious time to my post.
Follow | Upvote | Share | Comments
Follow me on Instagram.
Instagram
🆃🅷🅰️🅽🅺 🆈🅾️🆄