app.js
public
May 15, 2024
Never
63
1 import React, { useState, useEffect } from "react"; 2 import TutorialService from "../services/TutorialService"; 3 import { Link } from "react-router-dom"; 4 5 6 const TutorialList = () => { 7 8 const [tutorials, setTutorials] = useState([]); 9 const [currentTutorial, setCurrentTutorial] = useState(null); 10 const [currentIndex, setCurrentIndex] = useState(-1); 11 const [searchTutorial, setSearchTutorial] = useState(""); 12 13 useEffect(() => { 14 retrieveTutorials(); 15 }, []); 16 17 const retrieveTutorials = () => { 18 TutorialService.getAll(). 19 then(response => { 20 setTutorials(response.data); 21 }) 22 .catch(e => { 23 console.log(e); 24 }); 25 }; 26 27 const setActiveTutorial = (tutorial, index) => { 28 29 setCurrentTutorial(tutorial); 30 setCurrentIndex(index); 31 } 32 33 return ( 34 <div className="col-md-6"> 35 <h4>Tutorials List</h4> 36 <ul className="list-group"> 37 {tutorials && 38 tutorials.map((tutorial, index) => ( 39 <li className={ 40 "list-group-item" + (index === currentIndex ? "active" : "") 41 } 42 onclick={() => setActiveTutorial(tutorial, index)} 43 key={index} 44 > 45 {tutorial.title} 46 </li> 47 ))} 48 </ul> 49 </div> 50 ) 51 } 52 53 54 export default TutorialList;