I det här avsnittet kommer vi att använda en array för att förklara den ursprungliga slingan i renderingen. För detta har vi beskrivit ett exempel på react loop array i renderingen. När vi vill bygga vilken webbapplikation som helst är det mycket viktigt att ha kunskap om att hantera en mängd data. I det här exemplet kommer vi att se användningen av loop in reagera js . I vårt givna exempel kommer vi att använda för loop in react js. För att utföra detta måste vi följa några steg.
I det här avsnittet kommer vi att använda React-appen. När vi kräver en karta, foreach loop och för loop in react kan vi titta på följande exempel för att lära oss användningen av loop array n react js. I array vill vi alltid ha loop och foreach loop. När vi vill slingra vår array inom räckhåll kommer det att krävas en karta för att göra detta. Så vi kommer att förklara exemplet på en karta i react native. En ny array skapas med metoden map(). I anropsmatrisen ger den resultatet av att anropa en funktion på varje element. Genom detta kan loopingprocessen förenklas. När vi använder kartan behöver vi inte använda forEach-funktionen och for loop. Karta, för varje loop, för loop har många skillnader. Istället för att skriva över befintlig data använder kartfunktionen data och skapar en ny array. På grund av alla funktioner och kartfunktionens enkelhet uppmuntrar React docs oss starkt att använda kartfunktionen.
Vi kommer att ge två exempel i React-appen för att förklara detta enkla koncept. I det första exemplet kommer vi att beskriva reaktionsslingan, som har en endimensionell array. I det andra exemplet kommer vi att beskriva en slinga som har en flerdimensionell array. Båda exemplen är följande:
Exempel 1:
rc/App.js
import React from 'react'; function App() { const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin']; return ( <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> {students.map((student, index) => ( <tr> <td>{student.id}</td> <td>{student.name}</td> <td>{student.email}</td> </tr> ))} </table> ); } export default App; Efter att ha kört det här exemplet får vi följande förhandsvisning:
