🔴 Create Accordion using React JS in Hindi
HTML-код
- Опубликовано: 4 июл 2024
- Welcome, How to Create Accordion using React JS in Hindi
😍 Check my Instagram to Connect with me: / thapatechnical
0:00 Intro and Review
2:00 React App Create
7:50 Getting Data from the API
9:00 passing Data as props
12:00 Rendering the question & answer UI
15:30 Toggle Show Hide Functionality
17:00 Toggle + - icon
18:35 Outro
✅ NodeJS Tutorial in Hindi 2020: • NodeJS Tutorial in Hin...
✅ Express JS Tutorial In Hindi in 2020: • Express JS Tutorial In...
************ Must Watch Videos For Web Development ************
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...
➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
😍😍 Check Programming Videos in One Hour👇
➡️ Complete Reactjs in One video here • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter RUclips Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
** Video credit **
Video by Wolfgang Langer from Pexels
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
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: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...
Plz LIKE SHARE & SUBSRIBE the Channel ✌ Free Complete Source Code Link: www.thapatechnical.com/2021/05/how-to-create-accordion-using-react-js.html
😍 Check my Instagram to Connect with me: instagram.com/thapatechnical
thappa sir aapka insta link work nahi kar rha hai or page bhi nahi mil rha hai kya karu??
source code is not available.
Please get it done fixed.
source code is not available on website..
@@amit0007ist o bhaiii ap yha :)
source code is not available
🦓🦓🦓🦓🦓
. freee kaha he
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: rgb(116, 163, 204);
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#fcf5f5, #eff4fd);
}
.main-div {
width: 50vw;
padding: 50px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
rgba(17, 17, 26, 0.1) 0px 8px 8px;
}
h1 {
text-align: center;
font-family: "Bitter", serif;
text-transform: capitalize;
font-size: 32px;
letter-spacing: 5;
word-spacing: 5px;
margin-bottom: 50px;
color: #2c3148;
}
.main-heading {
display: flex;
margin-top: 30px;
padding: 20px 0 20px 20px;
background: #f1f4ff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}
.main-heading h3 {
margin-left: 30px;
font-family: "Mate SC", serif;
color: #303243;
font-family: "Raleway", sans-serif;
word-spacing: 1px;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
}
.main-heading p {
cursor: pointer;
border-radius: 50%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
background: #fff;
padding: 7px;
}
.answers {
padding: 30px 20px 40px 20px;
font-family: "Raleway", sans-serif;
font-size: 15px;
word-spacing: 2px;
font-weight: 400;
line-height: 1.7;
background: #fcf5f5;
color: rgb(40, 37, 53);
}
thanks
Thank You
Thanks bhai
@media(max-width : 850px){
.main-div {
width: 85vw;
}
}
Useful video
Thanks Vinod bhai
Aapne Mujhe Frontend Developer bana diya.
2019 se aapke video dekhni shuru ki thi
HTML,CSS,Js most Bootstrap4 in one Video.
Aaj 2 saal ka Experience ho gya h next 2 months me Inshallah react par job ka moka milega
Should we use only styled-components for our react project css in 2021?? Please answer. Thanks :)
Sir your UI is getting insane 🔥
I was thinking to build accordion and here it is 🔥
Hi Thapa
I am following this series since first video but i found that this video is confusing because there are lots of new and existing concept you have used here so i suggest you to make this kind of video in 2-3 parts so we can understand it better
nah it was eazy
i think video agay pichay hoi ha
learning form very first video from this awesome reactjs playlist. A best playlist and thanks for such nice content
Awesome Vin!! Now i'll try to implement this in react native.
Hi thapa
I have a little doubt about mongodb that in windows as you told we have to run mongod command first and then mongo. But i ran only mongo command and was able to retrive db details. Can you explain why?
Thank you so much for creating react project!!!❤❤❤❤🧡🧡🧡🧡❣❣❣
One Question Sir, If I want to close the current showing one by showing another one, how can I do that?
Thank you sir aap kuch na kuch hum sabko sikha te ho
You make it very simple Sir. Thank you for it.
Can you please a video to create tab UI using React?
Sir, antivirus ke hisab se plugin install karne me koi dikkat ati hai
cause of ternary operator agar hum useState(false) me false na bhi likhe toh bhi work proper ho raha hai plz explain kare thanks
But sir ek chiz agr usestate se show ki value ko setshow m true krte h to wo true saari values ke liy hoga naa aur saari values show ho jayengi...
I am from bangladesh. Your videos is really great and very heplfull . I can understand very easily. thank you so much bro..
Please share code link in every video, that would be very helpful!! Your videos are awesome.
On button click I want to stay on same page in react and I want highlight a textbox
Can u help please
Sir ,Pure Love from Bangladesh .
thank you so much sir , it was really awesome
your teaching is awesome
can you explain {id} {...data}
can we transfer multiple object as properties
Awesome Video!
Despite your website is something that I can't understand, this was the best strategy to map collapsed list with Typescript as menu
Thankyou Bhai mujhe is ki bahut need thi 👍
and seriously very helpful
Source code is not available on your website brother..please check it
Bro ek playlist jisme hum different ui components react use kar k banate hai...like starting with different types of navbar...phir carousels, phir cards, modals, forms, testimonial card, pricing card, form newsletter, etc etc...all types of components used in a webpage
kindly make video about how to deploy mern app on aws or any platform it will be very useful for us....
sir kya aapne laravel ke seires suru kar rahe ho kya
Apse me joh bhi sikha uska use karke slider ready kiya please bata a kaisa hai
Please create video on react interview questions answers series for freshers.
Bro, Please make setup tour.
Very helpful video❤❤
bro jab bhi map function me component return krta to wo show hi nhi krta component sab kuch kya huwa ha phir bhi?
Plus sign vali extension name kya ha any butter tell me
I want to make accordion and panel has multiple images.... Please help with such video
very well explained
sir kindly make video about how to deploy mern app on aws and google cloud
show to bad ka sign kya hain???? is it &&?
is ma agr hm sary Faq pr click kry gy to sary faq ma answer show ho jata ha but hmy is trha sa behtr krna chiay ka agr hm na 1st questin pr click kia then 2nd question pr click kia to first wala question close ho jana chaiay
Thanks a lot sir
Bootstrap5 ka accordian ka icon kese chane kre....mujhe icon ki jagah img lgani h after collapsed...
thanks a lot
I following your playlist from starting but in this i think you use new concept which was i cannot study in this playlist.
this is a random video on playlist
U Just Awesome
👍
Hi Sir,
Please make video on bootstrap tab...
Thank you
Nice😍❤️
Can we combine php and reactjs?
How we connect sql and reactjs
Use php api
Make a video on * how to make on how to make accordion using only html css and pure JavaScript*
Please make changes in angular tutorial with new updates.... Please ...
i didn't understand
yes exactly
slow banao video...and explain kara kro task complete hone k baad ki kese kya connection huaa.
thanks 👍
it collapse fast...how to decrease collapse time
How to expand all at once?
sir a toh awesome tha sir ek carosel bhi bana le naaa
Make one video for php and reactjs
I think you added it in middle of the series , its showing me at number 37/96
Pls make on next.js + react js
first🔥😁
Thanks bro
🔥🔥🔥🔥🔥
Nice 👍👍👍
bhai, setData wala function ka kya hua??
Sir React js main javascript plugin kaise use karte jaise ki typed.js and others...
Html file me uska cdn daal do
Pagination and tabs par bhi video lao bhai
sir can you teach us react native
Sir next js par ho sake toh video laao sir 😀😀
react native series start kejie....application making here....
Pura uppar se paar hogaya bhaiya
You are a legend bro !! Thanks for helping us so much 😍😍
When i am clicking on + button then all answers are showing
Can you tell me where i am doing wrong ?
@@abhisinghal3759 Make sure you have given different id values in Api ....Also make sure default value of usestate is false and only on click it becomes true ....Also make sure that in Accordion.js you are mapping data on current element with a unique key prop like this
data.map((currElement)=>{
return ;
})
Thanks
Angular pe projects bnao chote chote.....please
is vedio ka source code kaha sy mily gaa??
sir admin dashboard ka tutorial bana do please
Good sir
👌👌👌👌👌
Nice
vai ap type karte ho to fire kese jalta hey
sir pls make a video ui design to website full advance hona chahiye sir pls ese video nahi hai yt pe pls banao
❤
Op
Brothers finish MERN Porjects series
@Thapa Technical can u plz share the CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: rgb(116, 163, 204);
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#fcf5f5, #eff4fd);
}
.main-div {
width: 50vw;
padding: 50px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
rgba(17, 17, 26, 0.1) 0px 8px 8px;
}
h1 {
text-align: center;
font-family: "Bitter", serif;
text-transform: capitalize;
font-size: 32px;
letter-spacing: 5;
word-spacing: 5px;
margin-bottom: 50px;
color: #2c3148;
}
.main-heading {
display: flex;
margin-top: 30px;
padding: 20px 0 20px 20px;
background: #f1f4ff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}
.main-heading h3 {
margin-left: 30px;
font-family: "Mate SC", serif;
color: #303243;
font-family: "Raleway", sans-serif;
word-spacing: 1px;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
}
.main-heading p {
cursor: pointer;
border-radius: 50%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
background: #fff;
padding: 7px;
}
.answers {
padding: 30px 20px 40px 20px;
font-family: "Raleway", sans-serif;
font-size: 15px;
word-spacing: 2px;
font-weight: 400;
line-height: 1.7;
background: #fcf5f5;
color: rgb(40, 37, 53);
}
if you do the same code without making different component its not gonna work it just popups all the answers at once
Please do css battle #11
1:05 That Girl LoL 😁
Guys jisko code nhi mil rha woh thapa ke sath git search laro aur usme project ka naam likh do mil jayega
source code is't free?
sir pls make discord server 🔥
Source Code kha hai css to nhi hai UI part ko kaise banaye , 🤔🤔
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: rgb(116, 163, 204);
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#fcf5f5, #eff4fd);
}
.main-div {
width: 50vw;
padding: 50px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
rgba(17, 17, 26, 0.1) 0px 8px 8px;
}
h1 {
text-align: center;
font-family: "Bitter", serif;
text-transform: capitalize;
font-size: 32px;
letter-spacing: 5;
word-spacing: 5px;
margin-bottom: 50px;
color: #2c3148;
}
.main-heading {
display: flex;
margin-top: 30px;
padding: 20px 0 20px 20px;
background: #f1f4ff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}
.main-heading h3 {
margin-left: 30px;
font-family: "Mate SC", serif;
color: #303243;
font-family: "Raleway", sans-serif;
word-spacing: 1px;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
}
.main-heading p {
cursor: pointer;
border-radius: 50%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
background: #fff;
padding: 7px;
}
.answers {
padding: 30px 20px 40px 20px;
font-family: "Raleway", sans-serif;
font-size: 15px;
word-spacing: 2px;
font-weight: 400;
line-height: 1.7;
background: #fcf5f5;
color: rgb(40, 37, 53);
}
Sir apke video c kafi kuch sekha hu sir apse request h sir please ek video m ap starting c bnaiye registration page k bare m
And fields add kariye
Name
Password
Confirm password
State
Gender
Address
Mail
Number
Qualification with multiselect
Images uploaded
Ipaddrres
Time and date
Date of birth
With validation
Itne video ap bnate ho please ek video is par b ap bnaiye help ho jayegi meri bahut please sir aise koi video pure RUclips m n h
In php m btaiye ap using MySQL
Sir covid-19 tracker app class based components se bna do please 🙏
Class components abhi itna use main nhi hai.
@@heysuryaaaa Han but wo seekhne ke liy(as a begineer)easy rhta hai.
bhai source code m code to aa hi ni raha
Why .jsx not write
Css ka code nahi milegaa
2nd😆
Source code is not there on your site.
bewkoof banaya source code free mien available h