How to get a select element's value in React-Bootstrap

React-Bootstrap, a complete reimplementation of the popular CSS framework Bootstrap in React, offers a set of ready-to-use UIUser interface components and utilities. It is widely used in web development to save time and effort in designing and styling web pages. Obtaining a component’s value is essential to writing conditional statements based on it in our code. In this Educative Answer, we will learn how to retrieve a select element’s value in React-Bootstrap by building a basic React application.

Example

The React application consists of a select component with different options. When we select an option from the drop-down menu, its value is displayed below it. The UI of the application is as follows.

Output window
Output window

Implementation

To create this basic UI, go to the App.js file and replace the app function with the following:

{/*importing required libraries*/}
import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
import './App.css';
function App() {
  {/*using the useState hook update the values*/}
  const [selectedValue, setSelectedValue] = useState('');
  
  {/*taking the value of select element and updating it through the function*/}
  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
  };
  return (
    //code for application UI
    <div className="App">
      <h1>React Bootstrap Select Example</h1>
      {/*an input that has multple options*/}
      <Form>
        <Form.Group controlId="exampleForm.ControlSelect1">
          <Form.Label>Select an option</Form.Label>
          {/*Implementing the method to update the value once changed*/}
          <Form.Control as="select" value={selectedValue} onChange={handleSelectChange}>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
          </Form.Control>
          {/*Outputing the changed value*/}
        </Form.Group>
        <p>Selected Value: {selectedValue}</p>
      </Form>
    </div>
  );
}
export default App;

Explanation

  • Line 1–6: We first import the useState hook from the react library. Then, we import the Form component from react-bootstrap. We also import App.css for styling of the application.

  • Line 8–13: Using the useState hook, we declare selectedValue and setselectedValue. Through the setselectedValue method, we get the latest value of the component and then update selectedValue through the handleSelectChange method.

  • Line 15–22: We create a basic Form application using the Form component of react-bootstrap library.

  • Line 24–37: We assign the value of the select component to the selectedValue state variable defined on line 8. We also set  handleSelectChange as the onChange method to update the state variable whenever the value of the select component changes and display it in the web application.

Code

Click on the “Run” button below to start the React application. Then, click the link below the “Run” button to view and interact with the application.

“F)Ù  ¾@@ŽÀ‰PNG


IHDR(-SPLTEbÙûbÙûbÙûbÙû7^iU´ÐI“¨2QZFŠžD…˜A{‹?v†>r6[f]ÍíYÀÞT±ËK™¯6Zd3T^*;@]ËêO¤¼N¡¹L´=p~:fs9dp1OW0JR(36a×ø`ÕöW¹ÕHŽ¢D‚”8`l-@F,?D$&'"""\ÈçJ•«Dƒ•C€‘<ky;jx(25’Þ³ûtRNSæJIR6w¯IDATÓUÏGÂ0PƒÜíô^éIè÷¿IðþâÏèm4"[‚Ÿ›ã’¥—y,WP$E̹W$¹ƒ“ÒPÊ×°—‹…æ_`­ ýáÐSѲvÇîfC&LÔwÄ&À«
¦)¨ž@R‘2æ0µÿîýڀÇ%Ap¦Mª÷{6Þ9X[î"­KñpµRÂo»R9Pá0„Ð'¥^æÏïºÀ"QÃVGX`ó?óBÅۋm/IEND®B`‚‰PNG


IHDRשÍʟPLTEbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙû"""C‚”<lz7^i3S\-BG+=BV¶ÒK—­6[e*8<^ÎîX¾ÛHŽ¢@zŠ:fs8`k%,.R«ÅJ•ª0IQ)59'25$')]ËêL›±G‹ŸB}Ž@w†>r5XbaÕ÷\ÈçS±ËQ¨ÂF‰œ8co/GM\ÉèO¤½NŸ¶Lœ³I’§`ÓôZÃáÕç•tRNSí‘ˆ¬ø»"2IDAT(Ïm’×nÃ0EÑ’šÞ{ÏìÙþÿ·U²ƒ@@Ã^‡ Äa­Wü³Íjmmç—…Kèù³~[K~'‹§Öð"»9ðŠ1?Ub÷#ËÎÁl!³?»;*ĨÞSl—j¨=eˆÏÊUN^)I¨rAF‰Œ¡‰pÞÀ§©‡™mgèQ”Ô_€Só¶Èx¶
~,¼v4¸£’ˆ#H0T©xWÀt5•A€ºÎà)Ч{€àˆÞ®i¯Ä)i¹E\ˆÛ4^~Õ
aQ‚²²QˆöÝ©ÇtšRä¬ê{ÀÆgŽ6 ‰A‘²´•P×zVÄ£ž›	òº	\Ì5öuhH<oúØ3é10W،d·ì|¸¾â[øh_ê|6ÏçµüU2‡ËIEND®B`‚‰PNG


IHDR  D¤ŠÆ®PLTEbÙûbÙûbÙûbÙûbÙûbÙûbÙû"""%,.#&'O¢ºLœ²1MU/GN,@FG¡YÀÝQ«ÄQ¨ÁK—­(36^ÍíJ”©E‡šB@z‹8bm5Yd2PY`ÓôZÅãWº×UµÐT²ÌD„–C“;kx:hu3S\.DK'02FŠž=n|4V`0JR+:?)7;_Ðñ\ÉèV¸ÔR®È?u„I‘¦I‘¥`Õ÷?u…>s‚k¦tRNS­ñ&ïó(go¸IDAT8˅“	o£0„Ý´Û››@HBîƒ@Î6i»»ÿÿ­
i-5	k@ß³ìá=ñÒOøFO¢÷"zÏx çž­wÂkk—C§µ¢Ûÿ“”ãßÆÍ>ù‰F¿Ú
®,œ•®tÿÄhÔ…ÒËûŽIÂÉ@[µµ€ÒƒQBºµñOìZ ©ÍÔ·¯4kÆhÁ¬.˜ZÀXs‡׽ЙrdCzR’g)Ϥ”÷ÿaJá‘Ë:&ÀLÃX¥œô/kp¬oúŒ‰Í9ž°Z5@L¡¿VS	ÈPyæŸ}Äj­õëžZ{ô©Þ 5a¬-Í͕~ QS4E[çÐzS¼ah€!n÷rö5‡^l¤ŸYéɜ!òè4·ˆ%óÕyntXsÍëË*§ìw9%Y&ÇæG<&%)×V’¾I2¨ªÀ$éscE½–˜E.Ó,KéF3ȱì³~1š³Ž¸´ûÁo&#¿îpò›Ön;ʳ­2ýœ3Ìî=™[À•‡å¨.w?n¹²„$·ƒn.öhn0ÝQÜMÖÚE78%Äëãá}ýqüÿíá0¢gû×ÐIEND®B`‚‰PNG


IHDR@@·ìäPLTEbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙûbÙû"""(48$')[Åä3T^.DKP¥¾K˜®0LT-AG\ÈçX¼ÙJ–¬GŽ¢%*,O¢ºL›±D…—<m{;iw8am&-/#%&`ÔõT²ÌS¯ÉN ·=q€7_k+<A*9>^Îí/GN,?D'14##$]ËêI“¨)7;aÖøZÂàM´I‘¥@w†^ÏïX¿ÜV¶ÑC“Az‹QªÄFŠ6\g_ÑòV¹Õ9co5Yc3QZR¬ÆMžµB}Ž2PXP§À®ùï«
tRNSù׏+•”ô½»˜	£)ÒÓLIDATXÃ¥—wcÚ0ÅIÒÝúçÁ0Ãìö&lI mòý¿O½À2Pӆ÷Ò!=ëNïNRȇ»Ûé?qs{÷!äàãgéøþÞÿMz7¾~4	>IWà³éÿÍ57Bw§VuñpnpâþŒù.t{lz‹)”ÂӅßzŸk@/öv<ú6tìÁ/\ԟ=cEÃEú؇Б!äÖÓ6&V{c
Úr’ƒ^ëhÂ1Á&ÖïÏ:NXÍEÈÛëIÁòAƒŽÛŠ4 T•¤Ю¸Æ&á`‚˜îÛ£<I5És¦Ô$ø	I¯—„Ï2J AÆç…ÆÜ¿G‘@‚(<
ÝA	”¨`HÃøAD˜ݢυ*¤	"‚:Ù	$XÀú )LéŽÁ8D>‰@‚xÉÛ³0¥±íVÉÛüÅÙ%!i6Qe\#·Ýí¶9êãû¸e
’ó	9’Ýè
'PôM6-3
&HÔñPvÂ&:Ã"
1(OvؐµlV­²«éÖ
ô¬&cã5U>Kð´b#œ(Ký"º$@§Ø—F	ÝýÀïÙ)ÁÄâïæï7Èv,y	ž¡aþt)Tò]‹"uD0۝Ô̖JÒÊ¢œmï?>ö÷5em¥ÒØ›êۖHo@Ñ!m•ÈK†åg9g˜öœÕ1¤”''M‹ÐT=‚Q´¸ä`Có,¶rØ
JÙIäúÂ^pË‚¼ˆé²ÕÊã"ï#ÄT}1Í{ڒ‡!uêëÖêÆ@SÕ%Èø‹ÀÄå«r@ڝ‘ô¯¨KrÔá{=GðjÍðpïð…œJºó‰Æ©**¨N1¢!ÛÁÃ>ˆ¨‰Ì82Üç…ûŽ?ˆ5¨va&›½½:óȚS—ZMl4fŽc[oŸ
ÐmyBšwAv,F%º¶¨
=èì]OHÑ¡9?!JY±ÌÈ]JZîƇjÕ9ÓCVØ+íÁêQ2e
 ¹Jä)š=ي†N2%V–cÊò4Õš‰¸Ù1ˆ‰1ó‹qWÛJíálA‰gÛX(酁n-ù€5能ç¤ÆRý{I«lðÐiÇ´íV‹…xЂÏ3XÝäôUæäÝ4*“»P•Û¶ïO‰È@¥k·cu´Adne¯F3˜à©HÞ;"J;'oVžH0î0jÏN²0¢|?¨À@,-½~Kª˜©ÕK§ó/ß
EBÖ÷2ˆàøü_+PÊ
†G\ZÁXèö
PÒ¬ a¸#î¨ï“þçû•“dÀTЉ`!釲5׀µùQñ¢F¬\'Õiä·£«î/³qAÊ}àw5eɗBßwÙÎ&Mv恎T´Óç®û))˜ÀZ¦7éãGУÒ	Á™'Ó"]i{òü|>5~1Ÿ<Wá6twÁÝÕϾ+žŸ®~ú^ÿø~÷óÿ‹ûüÿ´(Ç»—|IEND®B`‚
Working application

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved