Render an Array in ReactJS
📅January 9, 2020
Today we will show you how to render an array in ReactJS. Manymore newbie developers have question about rendering react components from an array of objects.
Render an Array in ReactJS, Rendering React Components from Array of Objects, Rendering an Array of Data with map() and JSX, Render An Array Of Elements With React, Use Array.map() to Dynamically Render Elements, react loop through an array of objects.
Checkout more articles on ReactJS
- Handle Events in React
- api-calls-react-hooks" title="API calls with React Hooks">API calls with React Hooks
- form-validation-in-reactjs" title="Form Validation in ReactJS">Form Validation in ReactJS
- Login App – Create login form in ReactJS using secure REST API">Login App – Create login form in ReactJS using secure REST API
- popup-in-reactjs" title="Create simple Popup in ReactJS">Create simple Popup in ReactJS
If you have a list of the JSON data and you want to display the data in HTML format then you should loop through an array of objects and convert it into the HTML format.
Example: Render an Array in ReactJS
Let's take an example where we will consider an array in variable and based on it we will try to render HTML.
Variable in form of an array
const data = [
{
"id": 1,
"name": "cerulean",
"year": 2000,
"color": "#98B2D1",
"pantone_value": "15-4020"
},
{
"id": 2,
"name": "fuchsia rose",
"year": 2001,
"color": "#C74375",
"pantone_value": "17-2031"
},
{
"id": 3,
"name": "true red",
"year": 2002,
"color": "#BF1932",
"pantone_value": "19-1664"
},
{
"id": 4,
"name": "aqua sky",
"year": 2003,
"color": "#7BC4C4",
"pantone_value": "14-4811"
},
{
"id": 5,
"name": "tigerlily",
"year": 2004,
"color": "#E2583E",
"pantone_value": "17-1456"
},
{
"id": 6,
"name": "blue turquoise",
"year": 2005,
"color": "#53B0AE",
"pantone_value": "15-5217"
},
{
"id": 7,
"name": "sand dollar",
"year": 2006,
"color": "#DECDBE",
"pantone_value": "13-1106"
},
{
"id": 8,
"name": "chili pepper",
"year": 2007,
"color": "#9B1B30",
"pantone_value": "19-1557"
},
{
"id": 9,
"name": "blue iris",
"year": 2008,
"color": "#5A5B9F",
"pantone_value": "18-3943"
},
{
"id": 10,
"name": "mimosa",
"year": 2009,
"color": "#F0C05A",
"pantone_value": "14-0848"
},
{
"id": 11,
"name": "turquoise",
"year": 2010,
"color": "#45B5AA",
"pantone_value": "15-5519"
},
{
"id": 12,
"name": "honeysuckle",
"year": 2011,
"color": "#D94F70",
"pantone_value": "18-2120"
},
{
"id": 13,
"name": "cerulean",
"year": 2000,
"color": "#98B2D1",
"pantone_value": "15-4020"
},
{
"id": 14,
"name": "fuchsia rose",
"year": 2001,
"color": "#C74375",
"pantone_value": "17-2031"
},
{
"id": 15,
"name": "true red",
"year": 2002,
"color": "#BF1932",
"pantone_value": "19-1664"
},
{
"id": 16,
"name": "aqua sky",
"year": 2003,
"color": "#7BC4C4",
"pantone_value": "14-4811"
},
{
"id": 17,
"name": "tigerlily",
"year": 2004,
"color": "#E2583E",
"pantone_value": "17-1456"
},
{
"id": 18,
"name": "blue turquoise",
"year": 2005,
"color": "#53B0AE",
"pantone_value": "15-5217"
},
{
"id": 19,
"name": "sand dollar",
"year": 2006,
"color": "#DECDBE",
"pantone_value": "13-1106"
},
{
"id": 20,
"name": "chili pepper",
"year": 2007,
"color": "#9B1B30",
"pantone_value": "19-1557"
},
{
"id": 21,
"name": "blue iris",
"year": 2008,
"color": "#5A5B9F",
"pantone_value": "18-3943"
},
{
"id": 22,
"name": "mimosa",
"year": 2009,
"color": "#F0C05A",
"pantone_value": "14-0848"
},
{
"id": 23,
"name": "turquoise",
"year": 2010,
"color": "#45B5AA",
"pantone_value": "15-5519"
},
{
"id": 24,
"name": "honeysuckle",
"year": 2011,
"color": "#D94F70",
"pantone_value": "18-2120"
}
];
Now use `.map()` method to render HTML. Refer below article if you don't know about the `.map()` function.
Map, Filter and Reduce Operators in JavaScript
Following JSON data will be used to display HTML using `.map()` method.
<div className="box-container">
{data.map((d, i) => {
return <div key={i} className="box" style={{ backgroundColor: d.color }}>
<b>Name: </b>{d.name}<br />
<b>Year: </b>{d.year}<br />
<b>Color: </b>{d.color}<br />
<b>Pantone value: </b>{d.pantone_value}
</div>
})}
<div className="clearboth"></div>
</div>
Here we used the first two arguments of the callback function where first argument is used to fetch the single object of an array and second argument is used to bind the key of an element.
Because of the unique key on list of component, it will helpful for react to knows what to re-render and not re-render when the data changes.
After implementing the code, your file should look like below.
App.js
import React from 'react';
function App() {
const data = [
{
"id": 1,
"name": "cerulean",
"year": 2000,
"color": "#98B2D1",
"pantone_value": "15-4020"
},
{
"id": 2,
"name": "fuchsia rose",
"year": 2001,
"color": "#C74375",
"pantone_value": "17-2031"
},
{
"id": 3,
"name": "true red",
"year": 2002,
"color": "#BF1932",
"pantone_value": "19-1664"
},
{
"id": 4,
"name": "aqua sky",
"year": 2003,
"color": "#7BC4C4",
"pantone_value": "14-4811"
},
{
"id": 5,
"name": "tigerlily",
"year": 2004,
"color": "#E2583E",
"pantone_value": "17-1456"
},
{
"id": 6,
"name": "blue turquoise",
"year": 2005,
"color": "#53B0AE",
"pantone_value": "15-5217"
},
{
"id": 7,
"name": "sand dollar",
"year": 2006,
"color": "#DECDBE",
"pantone_value": "13-1106"
},
{
"id": 8,
"name": "chili pepper",
"year": 2007,
"color": "#9B1B30",
"pantone_value": "19-1557"
},
{
"id": 9,
"name": "blue iris",
"year": 2008,
"color": "#5A5B9F",
"pantone_value": "18-3943"
},
{
"id": 10,
"name": "mimosa",
"year": 2009,
"color": "#F0C05A",
"pantone_value": "14-0848"
},
{
"id": 11,
"name": "turquoise",
"year": 2010,
"color": "#45B5AA",
"pantone_value": "15-5519"
},
{
"id": 12,
"name": "honeysuckle",
"year": 2011,
"color": "#D94F70",
"pantone_value": "18-2120"
},
{
"id": 13,
"name": "cerulean",
"year": 2000,
"color": "#98B2D1",
"pantone_value": "15-4020"
},
{
"id": 14,
"name": "fuchsia rose",
"year": 2001,
"color": "#C74375",
"pantone_value": "17-2031"
},
{
"id": 15,
"name": "true red",
"year": 2002,
"color": "#BF1932",
"pantone_value": "19-1664"
},
{
"id": 16,
"name": "aqua sky",
"year": 2003,
"color": "#7BC4C4",
"pantone_value": "14-4811"
},
{
"id": 17,
"name": "tigerlily",
"year": 2004,
"color": "#E2583E",
"pantone_value": "17-1456"
},
{
"id": 18,
"name": "blue turquoise",
"year": 2005,
"color": "#53B0AE",
"pantone_value": "15-5217"
},
{
"id": 19,
"name": "sand dollar",
"year": 2006,
"color": "#DECDBE",
"pantone_value": "13-1106"
},
{
"id": 20,
"name": "chili pepper",
"year": 2007,
"color": "#9B1B30",
"pantone_value": "19-1557"
},
{
"id": 21,
"name": "blue iris",
"year": 2008,
"color": "#5A5B9F",
"pantone_value": "18-3943"
},
{
"id": 22,
"name": "mimosa",
"year": 2009,
"color": "#F0C05A",
"pantone_value": "14-0848"
},
{
"id": 23,
"name": "turquoise",
"year": 2010,
"color": "#45B5AA",
"pantone_value": "15-5519"
},
{
"id": 24,
"name": "honeysuckle",
"year": 2011,
"color": "#D94F70",
"pantone_value": "18-2120"
}
];
return (
<div className="App">
<div className="box-container">
{data.map((d, i) => {
return <div key={i} className="box" style={{ backgroundColor: d.color }}>
<b>Name: </b>{d.name}<br />
<b>Year: </b>{d.year}<br />
<b>Color: </b>{d.color}<br />
<b>Pantone value: </b>{d.pantone_value}
</div>
})}
<div className="clearboth"></div>
</div>
</div>
);
}
export default App;
For designing purpose, we have written a few style in css page.
index.css
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.box-container {
margin: 10px 0;
}
.box {
width: 300px;
margin: 10px;
padding: 10px;
line-height: 25px;
float: left;
border-radius: 4px;
border: 1px solid #999;
}
.clearboth {
clear: both;
}
Output:
Output - Render an Array in ReactJS - Clue Mediator
That's it for today.
Thank you for reading. Happy Coding!
