Rendering arrays of objects in React can be a challenge for developers who are new to the framework. Fortunately, React provides a powerful yet simple way of rendering data in an efficient manner. Let’s discuss this at length:<\/p>\n\n\n\n\n\n
What is an Array of Objects<\/strong>?<\/h2>\n\n\n\nAn array of objects simply called a ‘List’ in React, is the collection of data having similar information. An array of objects can be anything like different data structures, car names, etc. <\/p>\n\n\n\n
The most popular way to create a list or render an array of objects in React<\/a> is using the array.map() <\/strong>method which takes an array of data and maps it to an array of components, so that each data item is represented by a corresponding component. <\/p>\n\n\n\nIf you would like to explore React through a self-paced course, try HCL GUVI\u2019s React Self-paced certification course<\/a>.<\/p>\n\n\n\nAdditionally, the map() function can help with debugging and performance. This was just to give you a gist of what we’re about to discuss. Let’s dive into the details now!<\/p>\n\n\n\n
With the help of available JavaScri<\/a>pt Array.map() and filter() methods, the array of objects\/items can be transformed into an array of components, also known as a list. <\/p>\n\n\n\nLists are commonly used to store data retrieved from a server, like any user information, etc. Each data object\/item in the array consists of properties that can be easily accessed and manipulated. <\/p>\n\n\n\n
For example, an array of objects in React could contain a list of car names, each of which has its own model and name. See the below syntax:<\/p>\n\n\n\n
const carData = [\n {\n\tname: \u2018BMW\u2019,\n\tmodel: 2022\n },\n {\n\tname: Audi,\n\tmodel: 2021\n },\n]\n<\/code><\/pre>\n\n\n\nGiven above is a list or array<\/a> of objects consisting of names, and models of cars each of those having different properties. <\/p>\n\n\n\nWe can use these arrays of objects to pass information between different components, store data in a state, or even populate lists in a component.<\/p>\n\n\n\n
To render an array of objects\/items in React, we have different ways such as: iterating a loop and using the map() and filter() functions. Out of all these methods, the most popular way is using Array.map()<\/strong>.<\/em><\/p>\n\n\n\nAlso Read: How to use Props in React.<\/a><\/strong><\/p>\n\n\n\nRendering an array of objects using JavaScript map()<\/strong><\/h2>\n\n\n\nTo render an array of objects\/items in React, we loop through the array using the .map()<\/strong><\/em> <\/strong>method and return a single item. <\/p>\n\n\n\nIn the below example, we loop through the courses<\/strong><\/em> array and return a <li><\/strong> element for each item. We can use this method when we want to display a single element for each item in the given array. <\/p>\n\n\n\nWhen we call the .map() <\/em>function in JavaScript, it converts the array into whatever we return from the callback function we pass into it. This function always creates a new array. Let\u2019s understand one example<\/strong> in detail, step by step.<\/p>\n\n\n\nSteps to render an array of objects\/list:<\/strong><\/h2>\n\n\n\nBelow are the steps needed to render an array of objects or lists in React:<\/p>\n\n\n\n
Step 1: Create a react application<\/strong><\/h3>\n\n\n\nnpx create-react-app demo<\/code><\/pre>\n\n\n\nStep 2: Changing the directory<\/strong><\/h3>\n\n\n\ncd demo<\/code><\/pre>\n\n\n\nStep 3: Creating data as an array<\/strong><\/h3>\n\n\n\nOnce we have created a new React application<\/a>, add the following code in the App.js file before the functional component App().<\/p>\n\n\n\nconst courses = [\n \"Full Stack Developement Program\",\n \"Python Automation Testing Program\",\n \"UI\/UX Program\",\n];<\/code><\/pre>\n\n\n\nStep 4: Mapping the array into a new array of JSX nodes as <\/strong>arrayDataItems<\/strong><\/h3>\n\n\n\nconst arrayDataItems = courses.map((course) => <li>{course}<\/li>);<\/code><\/pre>\n\n\n\nStep 5: Return <\/strong>arrayDataItems <\/strong>from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\nApp.js file<\/em><\/strong><\/p>\n\n\n\nimport \".\/App.css\";\n\nimport React from \"react\";\n\n\/\/define the mock data\n\nconst courses = [\n \"Full Stack Developement Program\",\n \"Python Automation Testing Program\",\n \"UI\/UX Program\",\n];\n\nfunction App(props) {\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n const arrayDataItems = courses.map((course) => <li>{course}<\/li>);\n\n return (\n <div className=\"container\">\n <div>\n <h1>Render List\/Array of Items<\/h1>\n <\/div>\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/12\/screely-1672385013415.png\" "\\"\\"")
Render array of items\/objects<\/figcaption><\/figure><\/div>\n\n\nOne thing that you may notice here is that the console will give you a warning such as the one below:<\/p>\n\n\n\n
Warning: Each child in a list should have a unique \u201ckey\u201d prop.<\/pre>\n\n\n\nThis warning states that we need to provide a unique key to each data item in the array. Next, we will examine why we want to add a unique key to a list of elements rendered by an array.<\/p>\n\n\n\n
Keys in React<\/strong><\/h2>\n\n\n\nKeys in React help in knowing which array data item each component corresponds to. Also, Keys in React help in identifying and updating each item between renders without causing any bugs. <\/p>\n\n\n\n
Rendering an array of items into a React component makes it important to always provide a key to track the items between renders. Generally, we use id: as the key in various data arrays.<\/p>\n\n\n\n
Keys has some rules that we must follow to avoid any errors:<\/p>\n\n\n\n
\n- Keys must be unique<\/strong>– every item of the array must have a unique key.<\/li>\n\n\n\n
- Keys must be permanent<\/strong>– keys should not change their purpose or must not be changed between re-renders.<\/li>\n<\/ul>\n\n\n\n
Example:<\/strong><\/h2>\n\n\n\nLet\u2019s understand how we use keys in React to render an array of objects\/lists. We must use keys in our data. For demonstrating this example, step1 and step2 will be the same.<\/p>\n\n\n\n
Step 1: Creating data as an Array with Key<\/strong><\/h3>\n\n\n\nOnce we have created a new React application, add the following code to the App.js file before the functional component App(). <\/p>\n\n\n\n
Earlier, we hadn\u2019t specified the unique key in the data, but now we have used it in our structured data to avoid warnings\/errors.<\/p>\n\n\n\n
const courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999'\n\n },\n {\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999'\n },\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999'\n }\n]<\/code><\/pre>\n\n\n\nStep 2: Mapping the array into a new array of JSX nodes as <\/strong>arrayDataItems<\/strong><\/h3>\n\n\n\nconst arrayDataItems = courses.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <\/li>\n\n )<\/code><\/pre>\n\n\n\nStep 3: Return the <\/strong>array of Data Items from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\nApp.js file<\/em><\/strong><\/p>\n\n\n\nimport \".\/App.css\";\nimport React from \"react\";\n\n\/\/define the mock data with keys\nconst courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999'\n },\n\n {\n\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999'\n },\n\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999'\n }\n\n]\n\nfunction App() {\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n\n const arrayDataItems = courses.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <\/li>\n )\n\n return (\n <div className=\"container\">\n <div>\n <h1>Render List\/Array of Items with Key<\/h1>\n <\/div>\n\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nApp.css file<\/em><\/strong> <\/em>(Optional)<\/p>\n\n\n\n.container {\n margin-left: 20px;\n}\n\n.container h1 {\n color: green\n}\n\n.container li {\n display: flex;\n flex-direction: column;\n font-size: 20px;\n background-color: #35F543;\n width: 400px;\n color: white;\n padding: 2px;\n border-radius: 20px;\n justify-content: center;\n align-items: center;\n margin-bottom: 10px;\n}<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n\n![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/12\/screely-1672385019204.png\" "\\"\\"")
Keys in React<\/figcaption><\/figure><\/div>\n\n\nFiltering arrays of items<\/strong><\/h2>\n\n\n\nTill now we are returning a full array of items but what if we only want to show courses with a specific category? Then, we can use JavaScript’s filter() method <\/strong>to return just those with a matching category. <\/p>\n\n\n\nFilter() method takes an array of objects\/items, passes and checks whether the function returns true or false, and finally returns a new array of filtered items that returned true. Let\u2019s understand with the help of an example.<\/p>\n\n\n\n
const courses = [\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999',\n category: Software Development\u2019\n },\n {\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999',\n category: Testing\u2019\n },\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999',\n category: design\u2019\n }\n]<\/code><\/pre>\n\n\n\nIn the above data, we have three different categories and let\u2019s say we want only courses related to \u201cTesting\u201d, then the filter() method will return the course having a category as \u201cTesting\u201d.<\/p>\n\n\n\n
Step 1: Create a new array having the category \u201cTesting\u201d <\/strong><\/h3>\n\n\n\nconst testings = courses.filter(course =>\n course.category === 'Testing\u2019\n);<\/code><\/pre>\n\n\n\nStep 2: Mapping over \u201cTesting\u201d <\/strong><\/h3>\n\n\n\nconst arrayDataItems = testings.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <p>{course.category}<\/p>\n <\/li>\n )<\/code><\/pre>\n\n\n\nStep 3: Return <\/strong>arrayDataItems <\/strong>from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\nApp.js file<\/em><\/strong><\/p>\n\n\n\nimport \".\/App.css\";\nimport React from \"react\";\n\n\/\/define the mock data with keys\nconst courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999',\n category: 'Software Developmen',\n },\n {\n\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999',\n category: 'Testing',\n },\n {\n\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999',\n category: 'design'\n }\n]\n\nfunction App() {\n\n \/* new array of only 'testing' category *\/\n const testings = courses.filter(course =>\n course.category === 'Testing'\n );\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n const arrayDataItems = testings.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <p id=\"category\">{course.category}<\/p>\n <\/li>\n\n )\n\n return (\n <div className=\"container\">\n <div>\n <h1>Filtering List\/Array of Items<\/h1>\n <\/div>\n\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nWondering how you can code like this with ease? We’ve got the perfect learning resource: HCL GUVI’s highly accredited Full Stack Development Bootcamp<\/a> will turn you into a coding and development ninja in no time! Follow the link to learn more.<\/strong><\/p>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n
If you would like to explore React through a self-paced course, try HCL GUVI\u2019s React Self-paced certification course<\/a>.<\/p>\n\n\n\n Additionally, the map() function can help with debugging and performance. This was just to give you a gist of what we’re about to discuss. Let’s dive into the details now!<\/p>\n\n\n\n With the help of available JavaScri<\/a>pt Array.map() and filter() methods, the array of objects\/items can be transformed into an array of components, also known as a list. <\/p>\n\n\n\n Lists are commonly used to store data retrieved from a server, like any user information, etc. Each data object\/item in the array consists of properties that can be easily accessed and manipulated. <\/p>\n\n\n\n For example, an array of objects in React could contain a list of car names, each of which has its own model and name. See the below syntax:<\/p>\n\n\n\n Given above is a list or array<\/a> of objects consisting of names, and models of cars each of those having different properties. <\/p>\n\n\n\n We can use these arrays of objects to pass information between different components, store data in a state, or even populate lists in a component.<\/p>\n\n\n\n To render an array of objects\/items in React, we have different ways such as: iterating a loop and using the map() and filter() functions. Out of all these methods, the most popular way is using Array.map()<\/strong>.<\/em><\/p>\n\n\n\n Also Read: How to use Props in React.<\/a><\/strong><\/p>\n\n\n\n To render an array of objects\/items in React, we loop through the array using the .map()<\/strong><\/em> <\/strong>method and return a single item. <\/p>\n\n\n\n In the below example, we loop through the courses<\/strong><\/em> array and return a <li><\/strong> element for each item. We can use this method when we want to display a single element for each item in the given array. <\/p>\n\n\n\n When we call the .map() <\/em>function in JavaScript, it converts the array into whatever we return from the callback function we pass into it. This function always creates a new array. Let\u2019s understand one example<\/strong> in detail, step by step.<\/p>\n\n\n\n Below are the steps needed to render an array of objects or lists in React:<\/p>\n\n\n\n Once we have created a new React application<\/a>, add the following code in the App.js file before the functional component App().<\/p>\n\n\n\n App.js file<\/em><\/strong><\/p>\n\n\n\n One thing that you may notice here is that the console will give you a warning such as the one below:<\/p>\n\n\n\n This warning states that we need to provide a unique key to each data item in the array. Next, we will examine why we want to add a unique key to a list of elements rendered by an array.<\/p>\n\n\n\n Keys in React help in knowing which array data item each component corresponds to. Also, Keys in React help in identifying and updating each item between renders without causing any bugs. <\/p>\n\n\n\n Rendering an array of items into a React component makes it important to always provide a key to track the items between renders. Generally, we use id: as the key in various data arrays.<\/p>\n\n\n\n Keys has some rules that we must follow to avoid any errors:<\/p>\n\n\n\n Let\u2019s understand how we use keys in React to render an array of objects\/lists. We must use keys in our data. For demonstrating this example, step1 and step2 will be the same.<\/p>\n\n\n\n Once we have created a new React application, add the following code to the App.js file before the functional component App(). <\/p>\n\n\n\n Earlier, we hadn\u2019t specified the unique key in the data, but now we have used it in our structured data to avoid warnings\/errors.<\/p>\n\n\n\n App.js file<\/em><\/strong><\/p>\n\n\n\n App.css file<\/em><\/strong> <\/em>(Optional)<\/p>\n\n\n\n Till now we are returning a full array of items but what if we only want to show courses with a specific category? Then, we can use JavaScript’s filter() method <\/strong>to return just those with a matching category. <\/p>\n\n\n\n Filter() method takes an array of objects\/items, passes and checks whether the function returns true or false, and finally returns a new array of filtered items that returned true. Let\u2019s understand with the help of an example.<\/p>\n\n\n\n In the above data, we have three different categories and let\u2019s say we want only courses related to \u201cTesting\u201d, then the filter() method will return the course having a category as \u201cTesting\u201d.<\/p>\n\n\n\n App.js file<\/em><\/strong><\/p>\n\n\n\n Wondering how you can code like this with ease? We’ve got the perfect learning resource: HCL GUVI’s highly accredited Full Stack Development Bootcamp<\/a> will turn you into a coding and development ninja in no time! Follow the link to learn more.<\/strong><\/p>\n\n\n\nconst carData = [\n {\n\tname: \u2018BMW\u2019,\n\tmodel: 2022\n },\n {\n\tname: Audi,\n\tmodel: 2021\n },\n]\n<\/code><\/pre>\n\n\n\nRendering an array of objects using JavaScript map()<\/strong><\/h2>\n\n\n\n
Steps to render an array of objects\/list:<\/strong><\/h2>\n\n\n\n
Step 1: Create a react application<\/strong><\/h3>\n\n\n\n
npx create-react-app demo<\/code><\/pre>\n\n\n\nStep 2: Changing the directory<\/strong><\/h3>\n\n\n\n
cd demo<\/code><\/pre>\n\n\n\nStep 3: Creating data as an array<\/strong><\/h3>\n\n\n\n
const courses = [\n \"Full Stack Developement Program\",\n \"Python Automation Testing Program\",\n \"UI\/UX Program\",\n];<\/code><\/pre>\n\n\n\nStep 4: Mapping the array into a new array of JSX nodes as <\/strong>arrayDataItems<\/strong><\/h3>\n\n\n\n
const arrayDataItems = courses.map((course) => <li>{course}<\/li>);<\/code><\/pre>\n\n\n\nStep 5: Return <\/strong>arrayDataItems <\/strong>from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n
<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\n
import \".\/App.css\";\n\nimport React from \"react\";\n\n\/\/define the mock data\n\nconst courses = [\n \"Full Stack Developement Program\",\n \"Python Automation Testing Program\",\n \"UI\/UX Program\",\n];\n\nfunction App(props) {\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n const arrayDataItems = courses.map((course) => <li>{course}<\/li>);\n\n return (\n <div className=\"container\">\n <div>\n <h1>Render List\/Array of Items<\/h1>\n <\/div>\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n
Warning: Each child in a list should have a unique \u201ckey\u201d prop.<\/pre>\n\n\n\n
Keys in React<\/strong><\/h2>\n\n\n\n
\n
Example:<\/strong><\/h2>\n\n\n\n
Step 1: Creating data as an Array with Key<\/strong><\/h3>\n\n\n\n
const courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999'\n\n },\n {\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999'\n },\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999'\n }\n]<\/code><\/pre>\n\n\n\nStep 2: Mapping the array into a new array of JSX nodes as <\/strong>arrayDataItems<\/strong><\/h3>\n\n\n\n
const arrayDataItems = courses.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <\/li>\n\n )<\/code><\/pre>\n\n\n\nStep 3: Return the <\/strong>array of Data Items from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n
<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\n
import \".\/App.css\";\nimport React from \"react\";\n\n\/\/define the mock data with keys\nconst courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999'\n },\n\n {\n\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999'\n },\n\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999'\n }\n\n]\n\nfunction App() {\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n\n const arrayDataItems = courses.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <\/li>\n )\n\n return (\n <div className=\"container\">\n <div>\n <h1>Render List\/Array of Items with Key<\/h1>\n <\/div>\n\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n.container {\n margin-left: 20px;\n}\n\n.container h1 {\n color: green\n}\n\n.container li {\n display: flex;\n flex-direction: column;\n font-size: 20px;\n background-color: #35F543;\n width: 400px;\n color: white;\n padding: 2px;\n border-radius: 20px;\n justify-content: center;\n align-items: center;\n margin-bottom: 10px;\n}<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n
Filtering arrays of items<\/strong><\/h2>\n\n\n\n
const courses = [\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999',\n category: Software Development\u2019\n },\n {\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999',\n category: Testing\u2019\n },\n {\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999',\n category: design\u2019\n }\n]<\/code><\/pre>\n\n\n\nStep 1: Create a new array having the category \u201cTesting\u201d <\/strong><\/h3>\n\n\n\n
const testings = courses.filter(course =>\n course.category === 'Testing\u2019\n);<\/code><\/pre>\n\n\n\nStep 2: Mapping over \u201cTesting\u201d <\/strong><\/h3>\n\n\n\n
const arrayDataItems = testings.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <p>{course.category}<\/p>\n <\/li>\n )<\/code><\/pre>\n\n\n\nStep 3: Return <\/strong>arrayDataItems <\/strong>from the component wrapped in <ul><\/strong><\/h3>\n\n\n\n
<ul>{arrayDataItems}<\/ul><\/code><\/pre>\n\n\n\nComplete Example:<\/strong><\/h3>\n\n\n\n
import \".\/App.css\";\nimport React from \"react\";\n\n\/\/define the mock data with keys\nconst courses = [\n\n {\n id: 0,\n name: 'Full Stack Developement Program',\n price: '89,999',\n category: 'Software Developmen',\n },\n {\n\n id: 1,\n name: 'Python Automation Testing Program',\n price: '64,999',\n category: 'Testing',\n },\n {\n\n id: 2,\n name: 'UI\/UX Program',\n price: '89,999',\n category: 'design'\n }\n]\n\nfunction App() {\n\n \/* new array of only 'testing' category *\/\n const testings = courses.filter(course =>\n course.category === 'Testing'\n );\n\n \/* Mapping the courses into a new array of JSX nodes as arrayDataItems *\/\n const arrayDataItems = testings.map(course => \n <li key={course.id}>\n <p>{course.name}<\/p>\n <span>{course.price}<\/span>\n <p id=\"category\">{course.category}<\/p>\n <\/li>\n\n )\n\n return (\n <div className=\"container\">\n <div>\n <h1>Filtering List\/Array of Items<\/h1>\n <\/div>\n\n {\/* returning arrayDataItems wrapped in <ul> *\/}\n <ul>{arrayDataItems}<\/ul>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/h3>\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/12\/screely-1672385024774.png\" "\\"\\"")