🔴 Create Accordion using React JS in Hindi

[@ThapaTechnical]

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

[@waytofuture]

thappa sir aapka insta link work nahi kar rha hai or page bhi nahi mil rha hai kya karu??

[@PraveenKumar-xv3kd]

source code is not available. Please get it done fixed.

[@maulikrupala758]

source code is not available on website..

[@todayrashifalinhindi586]

@@amit0007ist o bhaiii ap yha :)

[@CreativeCorner752]

source code is not available 🦓🦓🦓🦓🦓 . freee kaha he

[@tarunmandhan5224]

* { 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); }

[@knightridergaming1106]

thanks

[@kanchanyadav8080]

Thank You

[@tusharsahu397]

Thanks bhai

[@tusharsahu397]

@media(max-width : 850px){ .main-div { width: 85vw; } }

[@ziyaulrana1840]

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

[@heysuryaaaa]

I was thinking to build accordion and here it is 🔥

[@smrutisurekhasahoo]

[@kamruzzaman6252]

Sir ,Pure Love from Bangladesh .

[@vivekkukreti1518]

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

[@bakasenpaidesu]

nah it was eazy

[@oook3407]

i think video agay pichay hoi ha

[@learn_Japanese_with_sam]

Thank you sir aap kuch na kuch hum sabko sikha te ho

[@Master_of_illusion]

Thankyou Bhai mujhe is ki bahut need thi 👍

[@CodingFire]

Sir your UI is getting insane 🔥

[@gscgaming]

I following your playlist from starting but in this i think you use new concept which was i cannot study in this playlist.

[@mdzakariahosain6161]

I am from bangladesh. Your videos is really great and very heplfull . I can understand very easily. thank you so much bro..

[@rajat-s-kale1771]

your teaching is awesome

[@travelwithbalghari4495]

learning form very first video from this awesome reactjs playlist. A best playlist and thanks for such nice content

[@aaaliii4u]

Awesome Vin!! Now i'll try to implement this in react native.

[@ujenbasi9495]

Thank you so much for creating react project!!!❤❤❤❤🧡🧡🧡🧡❣❣❣

[@gunjan9886]

Very helpful video❤❤

[@kunalsingh9461]

i didn't understand

[@syedsaad75]

yes exactly

[@learn_Japanese_with_sam]

Apse me joh bhi sikha uska use karke slider ready kiya please bata a kaisa hai

[@bharataneja_mzn]

Please share code link in every video, that would be very helpful!! Your videos are awesome.

[@aniketbhalla1521]

Should we use only styled-components for our react project css in 2021?? Please answer. Thanks :)

[@gocoder1159]

Bro, Please make setup tour.

[@rajeevyadav-np3fg]

Bootstrap5 ka accordian ka icon kese chane kre....mujhe icon ki jagah img lgani h after collapsed...

[@bisheshwarsharma6967]

Pura uppar se paar hogaya bhaiya

[@vin-kry]

Awesome Video!

[@rajatsaraswat64]

Code k bhee pese mag rhe h Kmaal ho sir aap

[@NeerajSharma-sk2rs]

and seriously very helpful

[@rajbannasa7662]

thank you so much sir , it was really awesome

[@NeerajSharma-sk2rs]

cause of ternary operator agar hum useState(false) me false na bhi likhe toh bhi work proper ho raha hai plz explain kare thanks

[@alex.noriega]

Despite your website is something that I can't understand, this was the best strategy to map collapsed list with Typescript as menu

[@watchthings5408]

slow banao video...and explain kara kro task complete hone k baad ki kese kya connection huaa. thanks 👍

[@arbaazbaiga1699]

U Just Awesome 👍

[@bhautikpatel4742]

Sir, antivirus ke hisab se plugin install karne me koi dikkat ati hai

[@subhamdhar8203]

bhai, setData wala function ka kya hua??

[@santrawebtech35]

sir a toh awesome tha sir ek carosel bhi bana le naaa

[@yuvrajgupta6341]

very well explained

[@gkmishra2009]

On button click I want to stay on same page in react and I want highlight a textbox Can u help please

[@basniwalvideos]

Plus sign vali extension name kya ha any butter tell me

[@santrawebtech35]

sir kya aapne laravel ke seires suru kar rahe ho kya

[@vikrampatekar7039]

Please create video on react interview questions answers series for freshers.

[@Devil-kw7fx]

Nice ☺️

[@MrProxy10]

1:05 That Girl LoL 😁

[@bharataneja_mzn]

I want to make accordion and panel has multiple images.... Please help with such video

[@badolhawlader5907]

it collapse fast...how to decrease collapse time

[@riversound8871]

You make it very simple Sir. Thank you for it. Can you please a video to create tab UI using React?

[@RaviJi-x8e]

Please help How to convert online Purchase Bootstrap HTML5 Template in react JS, in which assets folder available, Master page for menu header footer login logout process, only middle page content change for record save update edit for different purpose

[@rohitsachdeva4624]

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?

[@souravdhara8621]

show to bad ka sign kya hain???? is it &&?

[@crazyvaleideas]

You are a legend bro !! Thanks for helping us so much 😍😍

[@abhisinghal3759]

When i am clicking on + button then all answers are showing Can you tell me where i am doing wrong ?

[@crazyvaleideas]

@@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 ; })

[@abhisinghal3759]

Thanks

[@patelronak153]

Nice😍❤️

[@wassup102]

Thanks a lot sir

[@mysteriousdose6228]

Sir React js main javascript plugin kaise use karte jaise ki typed.js and others...

[@Saurav_100rav]

Html file me uska cdn daal do

[@krishnaTiwari851]

can you explain {id} {...data} can we transfer multiple object as properties

[@sanketjain2310]

Source code is not available on your website brother..please check it

[@qazimaaz6301]

bro jab bhi map function me component return krta to wo show hi nhi krta component sab kuch kya huwa ha phir bhi?

[@universal-content]

can you define : {show && {answers} this is new for me.

[@bakasenpaidesu]

if show is true , display this ' {answers} ' , else don't display.

[@skvalavideo]

I also found this new thing but , thapa bhai said it already explained in react i watched every video of this react series but i don't get in which video he explained this

[@universal-content]

@@skvalavideo in vue js this syntax is used for if condition . so it is possible that he want this P tag show when the condition is true.. i think.

[@faizalkhan2437]

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...

[@abhisekgupta1543]

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

[@gujjugando]

Please make changes in angular tutorial with new updates.... Please ...

[@thinkingmad1685]

Sir next js par ho sake toh video laao sir 😀😀

[@chandansayed8745]

One Question Sir, If I want to close the current showing one by showing another one, how can I do that?

[@sohilkhan-x5k8k]

Thanks bro

[@sandeep.slathia]

Nice 👍👍👍

[@Sks_engineering]

Can we combine php and reactjs? How we connect sql and reactjs

[@nirmaltech2043]

Use php api

[@shopytech4167]

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

[@vkvaraliya7504]

react native series start kejie....application making here....

[@jj_tech_gate]

Angular pe projects bnao chote chote.....please

[@piyushrathod1014]

kindly make video about how to deploy mern app on aws or any platform it will be very useful for us....

[@loveleenkaur6666]

thanks a lot

[@ziyaulrana1840]

Pagination and tabs par bhi video lao bhai

[@subhamsahoo5203]

Make a video on * how to make on how to make accordion using only html css and pure JavaScript*

[@lofivibes4you]

Source Code kha hai css to nhi hai UI part ko kaise banaye , 🤔🤔

[@ShaibiLife]

* { 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); }

[@firefightgaming5971]

Thank you

[@usmankhalid9516]

sir kindly make video about how to deploy mern app on aws and google cloud

[@cglaptop]

How to expand all at once?

[@hemantagrahari4298]

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 KZbin m n h In php m btaiye ap using MySQL

[@glamourgazegallery]

Hi Sir, Please make video on bootstrap tab...

[@Sks_engineering]

Make one video for php and reactjs

[@waytofuture]

sir pls make a video ui design to website full advance hona chahiye sir pls ese video nahi hai yt pe pls banao

[@Rakeshsingh-lq6pz]

Guys jisko code nhi mil rha woh thapa ke sath git search laro aur usme project ka naam likh do mil jayega

[@shubhamkhandal3219]

Pls make on next.js + react js

[@muhammadilyas2179]

Nice

[@prabhudevbetsurmath7270]

I think you added it in middle of the series , its showing me at number 37/96

[@ratulhasan8853]

vai ap type karte ho to fire kese jalta hey

[@harshithakapa8019]

@Thapa Technical can u plz share the CSS code

[@ShaibiLife]

* { 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); }

[@ksardikareddy5731]

Css ka code nahi milegaa

[@hassnainzafar5369]

is vedio ka source code kaha sy mily gaa??

[@gujju7625]

sir pls make discord server 🔥

[@ojhalpatkar963]

Sir covid-19 tracker app class based components se bna do please 🙏

[@heysuryaaaa]

Class components abhi itna use main nhi hai.

[@ojhalpatkar963]

@@heysuryaaaa Han but wo seekhne ke liy(as a begineer)easy rhta hai.

[@mukeshshantilal8663]

sir can you teach us react native

[@kktechnology2684]

Thapa is tapa thappad lagau kya 😂😂

[@shekhardhami6831]

sir admin dashboard ka tutorial bana do please

[@vijaythakur2708]

Good sir

[@santoshkumarmarar7048]

Brothers finish MERN Porjects series

[@Ajj-f]

bhai source code m code to aa hi ni raha

[@nehanalini1606]

The reason why I stopped watching your videos is that you say you have the link to the source code but there's no source code at all it's just your website's link and that website is of no use many of them in the comments in the youtube as well as in your website asking for the source code but you don't reply to them. It has been much better if you would have provided the github link to the source code. Also the video that I have watched it has the content it is very much easily understandable, I completely understand Node Express and MongoDB because of you..but everytime you say I have already explained this to you guys..Ok I understand if we do not understand something you want us to watch the video but again you say this again and again it's frustrating. I like the videos and I'm in the flow coding along with you and all... and in the middle you just randomly say to subscribe or I have already explained this in some other video. I have create this Accordion using React as he did, if anyone wants the source code lemme know! I'll provide the github link to it.

[@qazimaaz6301]

ye fo sure...

[@PremKumar-xz9yy]

could you please share the github link

[@moinshaikh6203]

Thapa Technical Girl Friend in starting of the video

[@tarifahmed7857]

Why .jsx not write

[@rhythmniraula3331]

dai form ko details lai gmail ma kasari target garne plz do me a favour♥️

[@nirmaltech2043]

Ksto

[@abhisinghal3759]

Little hard

[@jinayshah7088]

Source code is not there on your site.

[@tarunmandhan5224]

bewkoof banaya source code free mien available h