Use Bootstrap Accordion with React | Pluralsight

React-Bootstrap contains various bootstrap components that can be plugged and played for a React app. The same applies to the accordion; ... GauravSinghalUseBootstrapAccordionwithReactGauravSinghalNov19,20205Minread21,092ViewsNov19,20205Minread21,092ViewsWebDevelopmentFrontEndWebDevelopmentClient-sideFrameworksReactIntroduction38IntroductionGettingStartedwithreact-bootstrapAccordionIntegratingAccordioninReactComponentHowtoOpenAnyAccordionbyDefaultConclusionTopIntroductionAccordionscanbeusedtocreatetabbedelementsandhide/showcontentbasedoncollapsibletabs,followedbytheirchildcontentelements.ReactdoesnothaveitsownsetofelementstointegrateintotheReactcomponent.Hence,youneedtousesomepopularandfrequentlyusedlibrariessuchasreact-bootstrapthatprovidebootstrapelementsfortheReactapp.Usingreact-bootstrap,thereisanelementcalledthatallowsyoutotogglecontentbasedonaclickevent.Thisguidewillcovertheimplementation.GettingStartedwithreact-bootstrapAccordionReact-BootstrapcontainsvariousbootstrapcomponentsthatcanbepluggedandplayedforaReactapp.Thesameappliestotheaccordion;apartofthelibrarycanbeimportedfromthelibraryandusedinthecomponent.Beforeusinganyofthecomponents,youneedtoinstallitusingthebelowNPMcommand.1npminstallreact-bootstrap 2npminstallbootstrapshellAfterinstallingbothoftheabovelibraries,thenextstepistoimportthebootstrapCSSintotherootfileoftheReactapp,i.e.index.js.1import"bootstrap/dist/css/bootstrap.min.css";jsNowyoucanuseanyofthereact-bootstrapcomponentsintoyourReactapp.IntegratingAccordioninReactComponentAfterthereact-bootstrapconfiguration,thenextstepistoextracttheaccordioncomponentandconfigureit.Youcanimporttheaccordioncomponentlikethis:1import{Accordion}from"react-bootstrap";jsxTheaccordioncomponentworksontwodifferentelements:toggleelementsandcollapsibleelements.ToggleElementToenabletheexpandoperation,youneedtohaveanelementtobeclickedbytheuser,andbasedonthetoggleeffect,therespectivechildcontentwillbevisible.Forthat,thereisoneelementthatgetsusedtoimplementthetogglebelow.1 2TAB1 3jsxWhereasrepresentsthetoggleelement'sbehaviorcanbeanythingsuchasabutton,link,orcardheader.eventKeyidentifieseachtoggleelementtoexpandtherespectiveelementsoncetheuserclicksontheheader.CollapsibleElementOncetheuserclicksontheelement,respectivechildcontentshouldbeexpandedandvisibleintotheDOM;hencethereisanadditionalconfiguration.Toexpand,youhaveused.Tocollapsethesameway,thereisanotherelementcalled.1 2Thisisfirsttabbody 3jsxOnepropattached,eventKeyisusedtofindtheDOM'sspecificcomponentandrendertheassociatedchildelementcontentwitheachcollapsibleelement.Belowisthecompletedcode,whichshowsthecompleteimplementationoftheAccordion.1importReact,{Component}from"react"; 2import{Accordion,Card}from"react-bootstrap"; 3import"bootstrap/dist/css/bootstrap.min.css"; 4 5exportclassExample1extendsComponent{ 6render(){ 7return( 8<> 9

32> 33); 34} 35} 36 37exportdefaultExample1;jsxIntheaboveexample,twocollapsibleaccordionsgetusedandwrappedbytheparentelement.Onecollapsibleaccordioniseventkey=”0”andanotheriseventkey=”1”.Onceanyoftheaccordionsgetclicked,thematchingeventkeywillbeidentified,anditschildcontentwillbevisibletotheuser.YoucanconfiguremultipleaccordionsbasedonyourrequirementandsetthepropeventKey,whichisusedtoidentifytherespectivecollapsiblecontent.HowtoOpenAnyAccordionbyDefaultItmaybepossiblethatyouneedtoopenanyoftheaccordionsbydefaultoncethepagerenders,sothereisanadditionalpropertycalleddefaultActiveKey.Youcandefinethedefaultkeyofthedesiredcollapsibleaccordiontobevisible,asgivenbelow.1 2... 3jsxUsingtheaboveconfiguration,thethirdaccordionwillbeexpandedbydefaultbecauseyouhavedefinedthedefaultactivekeyto2.ConclusionTheaccordionisthebestchoicewhentheuserinterfaceshouldbecollapsedandabletoutilizethewebpagespacetoexpandthecontentwhenrequired.Apartfromreact-bootstrap,youcantryaccordionfromotherthird-partylibrariessuchasmaterial-uibasedontheUIspecificationandrequirementtoeffectivelyshowtherequiredcontent.38LEARNMORE