Dynamic Course Details Screen in Online Education React Native App in Hindi #7

Dynamic Course Details Screen in Online Education React Native App in Hindi #7

T
Thapa Technical
1 Video View·Jan 16, 2023

Welcome Guys,
Today, we will create the Course Details screen in the Online Education App of React Native Project.
In this video, we have create the CourseDetails.js screen and adding CourseDetails component in App.js file. Then to display data dynamically into the CourseDetails screen, we have to pass the ID of course as a prop to the CourseDetails.js file and in the CourseDetails.js file, we get that course ID. And According to course ID, we have fetched data from API using Array.prototype.find(). Then display that data into the CourseDetails screen.

👍Free Source Code Link: https://www.thapatechnical.com/2022/02/react-native-project-in-2022.html

😍 Check my Instagram to Connect with me: https://www.instagram.com/thapatechnical

00:00 Intro
00:25 Create CourseDetails Screen
01:00 Import CourseDetails.js in App.js
01:15 Adding CourseDetails component in App.js
01:53 Today's Task
02:30 Important Question & Think for its Solution
02:56 Solution of Question
03:40 Renaming the Course API file
04:25 Overview of Idea for solving the task
05:10 Passing the ID as a prop to CourseDetails.js screen
05:45 How to get ID in CourseDetails.js screen
07:12 Error Occurred : onPress is not function
07:20 Solved the error
08:30 Output after getting ID in CourseDetails.js screen
08:50 What is our next step?
09:23 How to find ID from API using Array.prototype.find()
10:26 Recommended video: JavaScript in one video
10:40 Get the details of ID from API using implementation of Array.prototype.find()
12:01 Display the details of selected ID
13:02 Run the App
13:35 Adding CSS in CourseDetails screen
13:51 Output after applying CSS
14:08 Adding more data in CourseDetails screen
14:98 Adding price in CourseDetails screen
15:54 Output after adding price in CourseDetails screen
16:00 Adding functionality in the "Join Now" button
16:20 Final Output of App
17:17 Free Source Code
17:21 Subscribe

************* Must Watch Videos For Web Development *************

😍😍 Check Programming Videos in One Hour👇


➡️ HTML in One Video: https://youtu.be/pN7BFLfSjFw


➡️ CSS in One video: https://youtu.be/hkQv0NIxKQY


➡️ CSS FlexBox in 30 Minutes: https://youtu.be/6L-PAmZajfA


➡️ JavaScript in One video: https://youtu.be/PODgPW-hbfU


➡️ ECMAScript 6 in One Video: https://youtu.be/Iek4DtRobLA


➡️ HTML5 in one video: https://youtu.be/4V0-YpO-KZo


➡️ CSS3 in one video: https://youtu.be/TFrFx7H5ZI8


➡️ Bootstrap4 in One video: https://youtu.be/yZnNnvXO8HI


➡️ Jquery in One video: https://youtu.be/PNvyPEQ0y-I


➡️ JSON in one video: https://youtu.be/bMqevPKAPD4


➡️ ReactJS in one video: https://youtu.be/43IbFDSVdB0


➡️ PHP in One Video: https://youtu.be/3024Kc6SDJ0


➡️ NodeJS in one video: https://youtu.be/ipnWAKoiBt


➡️ MySQL in one video: https://youtu.be/5bFxbwjN-Gk


*********** CLICK HERE TO WATCH *************

➡️ Fetch API in JavaScript: https://youtu.be/TojSXOuGUW4

➡️ Advanced JavaScript in Hindi Playlist: https://www.youtube.com/playlist?list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&disable_polymer=true

➡️ ECMAScript Tutorial in Hindi 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp19VX-DM4oHtmWhDfWblFh-

➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: https://youtu.be/Iek4DtRobLA

➡️ JavaScript Game Development Series in 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg


➡️ Source Code Link: https://www.thapatechnical.com/2019/11/how-to-get-source-code.html


➡️ Top 5 Programming Languages in 2020: https://youtu.be/czroY5nAD0c


➡️ Ludo Game JavaScript Link: https://youtu.be/_tlncjn1JpU


➡️Plz show some love to My Siter Youtube Channel and Plz Subscribe Link: https://www.youtube.com/channel/UCEst8yZ12JEYsSVVXmtU7GQ


***************** MUST WATCH VIDEOS ******************


➡️ How to become a Full Stack Developer 2020: https://youtu.be/etZ4jq_YjyM


➡️ How To Become a Web Developer 2020: https://youtu.be/Ur9LGVT-GXs


➡️ How JavaScript Works: https://youtu.be/VaBP6_pBOgM


➡️ Follow me on Instagram: https://www.instagram.com/vinodthapa55/



Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi

➡️ Link: https://youtu.be/cKR9gzco3Kc


Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.


Don't Forget to Follow me on all Social Network,


Website Link: https://www.thapatechnical.com


Instagram Link: https://www.instagram.com/vinodthapa55


Facebook Link: https://www.facebook.com/vinodthapa55


Twitter Link: https://twitter.com/vb55thapa


Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa/?ref=aymt_homepage_panel&eid=ARCTi5kdE1POliSOXnW51qZdo6NcpcSOqrioqut1KDac_CfgY5OCey-vcHlgRDgc_OK6eYNFCF_Rrfiq