Simple application of useState() Hook react

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