useState() 후크 반응의 간단한 적용

여기에서는 모든 데이터를 data.js 파일에 객체의 배열로 저장합니다. useState() 후크를 사용하여 모든 데이터를 app.js에 전달합니다. 그런 다음 "Course List"구성 요소에서 map() 메서드를 사용하여 데이터를 반복합니다.

udemy 베스트 셀러 자바스크립트 과정의 데이터를 저장하는 data.js 파일입니다.

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'
    },


];

data.js에서 app.js 파일에 객체 배열을 전달합니다.

앱.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;

useState() 후크를 사용하여 데이터를 저장합니다. 그런 다음 "CourseList.js"에 전달하십시오.
여기에서 map 함수를 사용하여 데이터를 반복합니다.

코스리스트.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

전체 소스 코드: https://github.com/mubasshir00/iterate-over-data-using-react