use function map array

Signed-off-by: Hưng Phan <phandinhhungvp2001@gmail.com>

Author: hungphan2001

src/App.js

@@ -10,12 +10,39 @@ import Footer from './shared/layout/Footer';
 import Detail from './pages/Detail';
 function App() {
 
+  const data = [
+    {
+      id: 1,
+      src: 'images/slide-1.jpg',
+      title: 'Lorem ipsum dolor sit amet',
+      des: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabiturultricies gravida nulla fermentum suscipit.'
+    },
+    {
+      id: 2,
+      src: 'images/slide-2.jpg',
+      title: 'Lorem ipsum dolor sit amet',
+      des: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabiturultricies gravida nulla fermentum suscipit.'
+    },
+    {
+      id: 3,
+      src: 'images/slide-3.jpg',
+      title: 'Lorem ipsum dolor sit amet',
+      des: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabiturultricies gravida nulla fermentum suscipit.'
+    },
+    {
+      id: 4,
+      src: 'images/slide-4.jpg',
+      title: 'Lorem ipsum dolor sit amet',
+      des: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabiturultricies gravida nulla fermentum suscipit.'
+    },
+  ] 
+
   return (
     <>
       <BrowserRouter>
       <Nav></Nav>
         <Routes>
-          <Route path='/' element={<Home />}></Route>
+          <Route path='/' element={<Home data={data} />}></Route>
           <Route path='blog' element={<Blog />}></Route>
           <Route path='/contact' element={<Contact />}></Route>
           <Route path='about' element={<About />}></Route>

src/pages/Home.js

@@ -1,46 +1,23 @@
 import React from 'react'
-import Footer from '../shared/layout/Footer'
 import { Link } from 'react-router-dom'
 
-const Home = () => {
+const Home = ({ data }) => {
   return (
     <>
       <div id="body">
         <h2 className="text-center">Courses</h2>
         <div className="container">
           <div className="row">
-            <div className="col-lg-3 col-md-6 col-sm-12">
-              <img className="img-fluid mb-4" src="images/slide-1.jpg" />
-              <h4><Link to='/details'>Lorem ipsum dolor sit amet</Link></h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies gravida nulla
-                fermentum suscipit.
-              </p>
-            </div>
-            <div className="col-lg-3 col-md-6 col-sm-12">
-              <img className="img-fluid mb-4" src="images/slide-2.jpg" />
-              <h4><Link to='/details'>Lorem ipsum dolor sit amet</Link></h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies gravida nulla
-                fermentum suscipit.
-              </p>
-            </div>
-            <div className="col-lg-3 col-md-6 col-sm-12">
-              <img className="img-fluid mb-4" src="images/slide-3.jpg" />
-              <h4><Link to='/details'>Lorem ipsum dolor sit amet</Link></h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies gravida nulla
-                fermentum suscipit.
-              </p>
-            </div>
-            <div className="col-lg-3 col-md-6 col-sm-12">
-              <img className="img-fluid mb-4" src="images/slide-4.jpg" />
-              <h4><Link to='/details'>Lorem ipsum dolor sit amet</Link></h4>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies gravida nulla
-                fermentum suscipit.
-              </p>
-            </div>
+            {
+              data.map((item) => (
+                <div className="col-lg-3 col-md-6 col-sm-12">
+                  <img className="img-fluid mb-4" src={item.src} />
+                  <h4><Link to='/details'>{item.title}</Link></h4>
+                  <p>{item.des}</p>
+                </div>
+              ))
+            }
+
           </div>
         </div>
       </div>