Create a separate functional component for rendering the alert. It returns a react-bootstrap alert containing a heading, content, and a close ...
GauravSinghalHowtoUseReactwithReactBootstrapGauravSinghalJun22,202010Minread4,603ViewsJun22,202010Minread4,603ViewsWebDevelopmentFrontEndWebDevelopmentClient-sideFrameworkReactIntroduction20IntroductionSettingupaReactBootstrapAppCreatingareact-bootstrapModalCreatingaSimpleFormInsidetheModalAddingareact-bootstrapAlertComponentCombiningAlltheFeaturesConclusionTopIntroductionReactBootstrapisanopen-sourceUIlibrarybuiltspecificallyforReacttohelpyouusenativeBootstrapcomponentsaspureReactcomponents,suchasmodals,popovers,buttons,andsoon.It'ssimpletouseandcanbeeasilyintegratedwithanexistingReactapptocustomizieUIwithoutcompromisingfunctionality.ThisguideexploreshowtouseReactwithReactBootstrapinyourapp.SettingupaReactBootstrapAppCreateanewReactproject.1npxcreate-react-appreact-and-react-bootstrap-appshellInstallreact-bootstrapandBootstrap.1npminstallreact-bootstrapbootstrapshellCreatingareact-bootstrapModalUseareact-bootstrapmodalthatactsasasigninformpopupinsideApp.js.First,importtheuseStatehookfromReacttousestatevariablesinsideafunctionalcomponent.ThenimportbothModalandButtonfromreact-bootstrapalongwithBootstrap'sminifiedCSStouseBootstrap'sstyleclasses.1importReact,{useState}from'react';
2import{Modal}from'react-bootstrap';
3import{Button}from'react-bootstrap';
4import'bootstrap/dist/css/bootstrap.min.css';jsxTheModalusesashowproptocontrolitsopenstateonthepage.showstoresabooleanvalueindicatingifthepopupissupposedtobeopenorclosed.Youcantoggleshowusinganeventhandlerhookedtoitsbuttons.Havealookatthefollowingcodetorenderareact-bootstrapmodalthatopenswhenyouclickonthesign-inbutton.1...
2functionApp(){
3const[show,setShow]=useState(false);
4
5consthandleClose=()=>setShow(false);
6consthandleShow=()=>setShow(true);
7
8return(
9<>
10
11SignIn
12
13
14
15
16SignInForm
17
18
19{/*addareactformhere*/}
20
21
22
23SignUp
24
25
26SignIn
27
28
29
30>
31);
32}
33
34exportdefaultApp;jsxCreatingaSimpleFormInsidetheModalPopulatethemodal'sbodywithaFormwithtwoinputfields:oneforenteringanemailaddressandtheotherforapassword.Createastatevariabletostoretheemailinsidethestateofthecomponent.1...
2const[email,setEmail]=useState('');
3...jsxYoucanuseBootstrap'srowsandcolumnstomanagecontent'slayoutandenclosetheformfieldsinsidetheform-groupclassforaneatview.AttachanonChangehandlertotheemailfieldthatcapturesthevalueenteredinthefieldandsetsittotheemailstatevariable.1...
2
3
31
32...jsxToverifywhetherthestatehasbeensetappropriately,logitontheconsolewhentheuserclicksthesign-inbutton.Youcandothisinsidemodal'shandleClose()method,whichisfiredwhenthemodalclosesasshownbelow.Addingareact-bootstrapAlertComponentAlertsareagreatwaytogiveasenseoffeedbacktotheuseruponsuccessfulsubmissionofformsorincaseoferrors.ImporttheAlertcomponentfromreact-bootstraponthetopinsideApp.js.1import{Alert}from'react-bootstrap';jsxCreateaseparatefunctionalcomponentforrenderingthealert.Itreturnsareact-bootstrapalertcontainingaheading,content,andaclosebutton.Justlikethemodal,itusestheshowproptoindicatewhetherthealertwillremainopenedorclosedinthecurrentview.1functionMyAlert(){
2const[show,setShow]=useState(true);
3
4return(
5<>
6
7Welcomeuser:)
8
9youhavesuccessfullysignedin!
10
11
12
13setShow(false)}variant="outline-success">
14Closemeya'll!
15
16
17
18
19{!show&&setShow(true)}>ShowAlert}
20>
21);
22}jsxRenderMyAlertinsideApp.js
.1...
2
3...jsxBydefault,thealertwillremainopenonthepageduetotheinitialvalueofshow.CombiningAlltheFeaturesFortheMyAlertcomponenttointeractwiththeAppcomponent,passinemailandanotherstatevariableaspropstotheformer.Thisstatevariablecontrolsthealert'sshowstateonthepageconcerningthemodal.Sincethealertneedstobehiddenorclosedbeforetheuserhasclickedtosignin,initializeitasfalse.1...
2const[showAlert,setShowAlert]=useState(false);
3...jsxSetittotruewhentheuserclickstosignininsidehandleClose()ofthemodal.1...
2consthandleClose=()=>{
3console.log(email);
4setShow(false);
5setShowAlert(true);
6}
7...jsxConditionallyrendertheMyAlertcomponentandpassinemailandshowAlertasprops.1...
2{showAlert&&}
3...jsxInitializeshowasshowAlertinsidetheMyAlertcomponentsothealertisinitiallyclosedandisfiredonlywhentheuserclicksthesign-inbutton.1...
2const[show,setShow]=useState(showAlert);
3...jsxOutputemailinsidethealert'sbody.1...
2
3{email}hassuccessfullysignedin!
4
5...jsxFinally,yourApp.jswilllooklike
this:1importReact,{useState}from'react';
2import{Modal,Form}from'react-bootstrap';
3import{Button}from'react-bootstrap';
4import{Alert}from'react-bootstrap';
5import'bootstrap/dist/css/bootstrap.min.css';
6
7
8
9functionMyAlert({email,showAlert}){
10const[show,setShow]=useState(showAlert);
11
12return(
13<>
14
15Welcomeuser:)
16
17{email}hassuccessfullysignedin!
18
19
20
21setShow(false)}variant="outline-success">
22Exit
23
24
25
26
27
28>
29);
30}
31
32functionApp(){
33const[show,setShow]=useState(false);
34const[email,setEmail]=useState('');
35const[showAlert,setShowAlert]=useState(false);
36consthandleClose=()=>{
37console.log(email);
38setShow(false);
39setShowAlert(true);
40}
41consthandleShow=()=>setShow(true);
42
43return(
44<>
45
46SignIn
47
48
49
50
51SignInForm
52
53
54
81
82
83
84SignUp
85
86
90SignInNow
91
92
93
94
95{showAlert&&}
96>
97);
98}
99
100exportdefaultApp;jsxNowyouhaveamodalthatopensasign-informconnectedtoyourstate,whichtriggersanalertwhenauserclicksthesign-inbutton.ConclusionInthisguideyoulearnedhowtouseregularReactfeatures,suchasmanagingthestate,conditionallyrenderingacomponent,andpassingpropstoachildcomponent,withReactBootstrapcomponents.ReactBootstrapisagreatlibrarythatprovidesseveralotherfunctionalities.YoucanconvenientlymoldtheutilityofanyReactBootstrapcomponenttoalignwithyourexistingapp'sfeatures.IhopethisguidehelpedyougetstartedwithReactBootstrap.Iwouldalsorecommendgoingthroughthedocumentationtolearnmoreaboutavailablecomponents.20LEARNMORE
