Here, I store all the data as an array of objects in the data.js file. I pass all data to our app.js using useState() hook. then in the “Course List” component, I iterate over data using the map() method.
data.js file where I store data of udemy best seller javascript course .
export default [
{
id: 1,
name: 'The Complete JavaScript Course 2021: From Zero to Expert!',
author:'Jonas Schmedtmann',
price: 129.99,
image:
'https://img-a.udemycdn.com/course/240x135/851712_fc61_6.jpg?Yc2ybPX7AXeZKeeSkrtc1R4f5UDNui9HwUTT-_bFBVGfjlZ5t6Q87GuBqjm2THKor3xVFGJuBV87636XVT1yIzlnzVzO8A2Et_jFwsI865a_MWavua2Pu7AhOt95',
},
{
id:2,
name:'JavaScript - The Complete Guide 2021 (Beginner + Advanced)',
author:'Maximilian Schwarzmüller',
price:'129.99',
image:'https://img-a.udemycdn.com/course/240x135/2508942_11d3_3.jpg?ATh2D-3PrfQZU38ORJX3t_Vm_ZGiuR-lEviSjc2rkIO-jU6b5pasJ3EkhGO3vSbBuxK4W9wq6YQ0_nyMDplQ8ddiqptXaSo4r57pYC16zv8nFDgEKlLBjehBsVV05w'
},
{
id:3,
name: 'JavaScript: Understanding the Weird Parts',
author:'Anthony Alicea',
price:'129.99',
image:'https://img-a.udemycdn.com/course/240x135/364426_2991_6.jpg?CYfpgUQsrAiRBXlmHWcIdiJX4sHB8ICefFSI0cSEnZE14FhgiyZFPl999ZKiCH6KqCIOvwOwp2AcUOA9Q-lcHfoIoOCjE0Xu41nAPOgKDXlqIvExfy5ilaWNhQPN'
},
{
id:4,
name: 'Modern JavaScript From The Beginning',
author:'Brad Traversy',
price:'129.99',
image:'https://img-a.udemycdn.com/course/240x135/1463348_52a4_2.jpg?xBY1XF_HTQKvN0p7DR2wSBiRcqUvm2jBDLEOjq_uDWi_aVCCmREIH2XhZuO460Ro-xrQVQzaAxOePdfpBbNXKF8OMnInKyobXA-lERmot2vu8h1148TNQArrw_l4GA'
},
{
id:5,
name: 'The Modern JavaScript Bootcamp',
author:'Andrew Mead',
price:'84.99',
image:'https://img-b.udemycdn.com/course/240x135/1470810_a8b0.jpg?secure=fSTIwXbZaNdTiu8G5waX3w%3D%3D%2C1615446574'
},
];
from data.js I pass array of object to the app.js file .
app.js
import { useState } from 'react';
import './App.css';
import CourseList from './Components/CourseList';
import data from './data'
function App() {
const [Courses, setCourses] = useState(data);
return (
<>
<main>
<div>
<h2>Best Selling JavaScript Course List</h2>
<div>
<CourseList Courses={Courses} />
</div>
</div>
</main>
</>
);
}
export default App;
using useState() hook we store our data. then pass it to "CourseList.js"
Here to use map function to iterate over data .
CourseList.js
import React from 'react'
const CourseList = ({Courses}) => {
return (
<>
{
Courses.map((course)=>{
const {id,name,author,price,image} = course
return(
<div className="container" key={id}>
<div className="course-list">
<img src={image} alt={name}></img>
<div>
<p className="course-name">{name}</p>
<p className="author">{author}</p>
<div className="pEnroll">
<p className="price-tag"> ${price} </p>
<button>Enroll Now</button>
</div>
</div>
</div>
</div>
)
})
}
</>
)
}
export default CourseList
full Source Code : https://github.com/mubasshir00/iterate-over-data-using-react
Top comments (0)