You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
977 B
JavaScript
34 lines
977 B
JavaScript
import { useState, useEffect } from 'react';
|
|
import CourseCard from './CourseCard';
|
|
import CourseSearch from './CourseSearch';
|
|
|
|
|
|
export default function UserView({coursesData}) {
|
|
|
|
const [courses, setCourses] = useState([])
|
|
|
|
useEffect(() => {
|
|
const coursesArr = coursesData.map(course => {
|
|
|
|
//only render the active courses since the route used is /all from Course.js page
|
|
if(course.isActive === true) {
|
|
return (
|
|
<CourseCard courseProp={course} key={course._id}/>
|
|
)
|
|
} else {
|
|
return null;
|
|
}
|
|
})
|
|
|
|
//set the courses state to the result of our map function, to bring our returned course component outside of the scope of our useEffect where our return statement below can see.
|
|
setCourses(coursesArr)
|
|
|
|
}, [coursesData])
|
|
|
|
return(
|
|
<>
|
|
<CourseSearch />
|
|
{ courses }
|
|
</>
|
|
)
|
|
} |