{"id":258359,"date":"2024-05-03T17:23:06","date_gmt":"2024-05-03T17:23:06","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=258359"},"modified":"2024-05-03T17:23:06","modified_gmt":"2024-05-03T17:23:06","slug":"how-to-get-selected-value-of-dropdown-in-react-js","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/","title":{"rendered":"How to get selected value of dropdown in React.js?"},"content":{"rendered":"<p>React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected value of a dropdown menu in React.js. In this article, we will explore the different ways to achieve this and provide answers to some related frequently asked questions.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#How_to_get_selected_value_of_dropdown_in_Reactjs\" title=\"How to get selected value of dropdown in React.js?\">How to get selected value of dropdown in React.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#FAQs\" title=\"FAQs:\">FAQs:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#1_How_can_I_set_a_default_value_for_the_dropdown\" title=\"1. How can I set a default value for the dropdown?\">1. How can I set a default value for the dropdown?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#2_How_can_I_retrieve_the_selected_value_on_a_form_submit\" title=\"2. How can I retrieve the selected value on a form submit?\">2. How can I retrieve the selected value on a form submit?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#3_Can_I_get_the_selected_value_without_using_state\" title=\"3. Can I get the selected value without using state?\">3. Can I get the selected value without using state?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#4_Can_I_populate_the_dropdown_dynamically_from_an_array\" title=\"4. Can I populate the dropdown dynamically from an array?\">4. Can I populate the dropdown dynamically from an array?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#5_How_can_I_set_the_selected_value_programmatically\" title=\"5. How can I set the selected value programmatically?\">5. How can I set the selected value programmatically?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#6_What_if_the_dropdown_has_a_multiple_selection\" title=\"6. What if the dropdown has a multiple selection?\">6. What if the dropdown has a multiple selection?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#7_How_can_I_get_both_the_selected_value_and_the_display_text\" title=\"7. How can I get both the selected value and the display text?\">7. How can I get both the selected value and the display text?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#8_Can_I_disable_specific_options_in_the_dropdown\" title=\"8. Can I disable specific options in the dropdown?\">8. Can I disable specific options in the dropdown?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#9_How_can_I_reset_the_dropdown_to_its_initial_state\" title=\"9. How can I reset the dropdown to its initial state?\">9. How can I reset the dropdown to its initial state?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#10_Can_I_use_a_controlled_component_approach_instead_of_using_state\" title=\"10. Can I use a controlled component approach instead of using state?\">10. Can I use a controlled component approach instead of using state?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#11_How_can_I_style_the_dropdown_to_match_my_design\" title=\"11. How can I style the dropdown to match my design?\">11. How can I style the dropdown to match my design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#12_Can_I_use_a_third-party_library_for_dropdown_components_in_Reactjs\" title=\"12. Can I use a third-party library for dropdown components in React.js?\">12. Can I use a third-party library for dropdown components in React.js?<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"How_to_get_selected_value_of_dropdown_in_Reactjs\"><\/span>How to get selected value of dropdown in React.js?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo get the selected value of a dropdown in React.js, you can make use of the &#8216;onChange&#8217; event handler. This event fires whenever the value of the dropdown changes. By capturing the event and accessing its target value, you can retrieve the selected value in React.js. The following example illustrates how to do this:<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>function Dropdown() {<br \/>\n  const [selectedValue, setSelectedValue] = useState(&#8221;);<\/p>\n<p>  const handleDropdownChange = (event) => {<br \/>\n    setSelectedValue(event.target.value);<br \/>\n  };<\/p>\n<p>  return (<br \/>\n    <select value={selectedValue} onChange={handleDropdownChange}><br \/><option value=\"option1\">Option 1<\/option><br \/><option value=\"option2\">Option 2<\/option><br \/><option value=\"option3\">Option 3<\/option><br \/>\n    <\/select><br \/>\n  );<br \/>\n}<br \/>\n&#8220;`<br \/>\nIn this example, we define a `selectedValue` state variable using the `useState` hook. The `handleDropdownChange` function is called whenever the dropdown&#8217;s value changes. It updates the `selectedValue` state variable with the new selected value. By setting the `value` prop of the `select` element to `selectedValue` and attaching the `onChange` event handler, we ensure that the dropdown&#8217;s value is updated correctly.<\/p>\n<p><strong>How to get the initial selected value of a dropdown?<\/strong><br \/>\nTo get the initial selected value of a dropdown, you can set the initial value of the `selectedValue` state variable using the `useState` hook. For example, `const [selectedValue, setSelectedValue] = useState(&#8216;option1&#8217;);` will set &#8216;option1&#8217; as the initial selected value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"1_How_can_I_set_a_default_value_for_the_dropdown\"><\/span>1. How can I set a default value for the dropdown?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo set a default value for the dropdown, you can set the initial value of the `selectedValue` state variable using the `useState` hook. You can assign any specific value to represent the default selection.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_How_can_I_retrieve_the_selected_value_on_a_form_submit\"><\/span>2. How can I retrieve the selected value on a form submit?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can store the selected value in a state variable when it changes and access it on form submission from the same state variable.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Can_I_get_the_selected_value_without_using_state\"><\/span>3. Can I get the selected value without using state?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can get the selected value without using state by directly accessing the `event.target.value` in the `onChange` event handler function.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Can_I_populate_the_dropdown_dynamically_from_an_array\"><\/span>4. Can I populate the dropdown dynamically from an array?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can populate the dropdown dynamically by mapping over an array and generating the `option` elements based on the array values.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_How_can_I_set_the_selected_value_programmatically\"><\/span>5. How can I set the selected value programmatically?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo set the selected value programmatically, update the state variable representing the selected value. For example, `setSelectedValue(&#8216;option2&#8217;)` will set &#8216;option2&#8217; as the selected value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_What_if_the_dropdown_has_a_multiple_selection\"><\/span>6. What if the dropdown has a multiple selection?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nIf the dropdown allows multiple selections, you can use the `event.target.selectedOptions` property to access all selected options and retrieve their values.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_How_can_I_get_both_the_selected_value_and_the_display_text\"><\/span>7. How can I get both the selected value and the display text?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can store an array of objects in your component&#8217;s state, where each object contains both the value and display text. In the `onChange` event handler, you can access both properties of the selected option.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Can_I_disable_specific_options_in_the_dropdown\"><\/span>8. Can I disable specific options in the dropdown?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can disable specific options in the dropdown by using the `disabled` attribute on the respective `option` elements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_How_can_I_reset_the_dropdown_to_its_initial_state\"><\/span>9. How can I reset the dropdown to its initial state?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo reset the dropdown to its initial state, you can reset the `selectedValue` state variable to its initial value or an empty string.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_Can_I_use_a_controlled_component_approach_instead_of_using_state\"><\/span>10. Can I use a controlled component approach instead of using state?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can use a controlled component approach by managing the state of the dropdown in a parent component and passing the selected value as a prop to the dropdown component.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_How_can_I_style_the_dropdown_to_match_my_design\"><\/span>11. How can I style the dropdown to match my design?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can apply custom CSS classes or inline styles to the `select` element to style the dropdown according to your design requirements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"12_Can_I_use_a_third-party_library_for_dropdown_components_in_Reactjs\"><\/span>12. Can I use a third-party library for dropdown components in React.js?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, there are several third-party libraries like React-Select, Downshift, and React-Bootstrap that provide advanced dropdown components with additional features and customization options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected value of a dropdown menu in React.js. In this article, we will explore the different ways to achieve this and provide answers to some related frequently asked questions. How to get selected value &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to get selected value of dropdown in React.js?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#more-258359\">Read more<span class=\"screen-reader-text\">How to get selected value of dropdown in React.js?<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":107420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86279],"tags":[],"class_list":["post-258359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","no-featured-image-padding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to get selected value of dropdown in React.js?<\/title>\n<meta name=\"description\" content=\"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get selected value of dropdown in React.js?\" \/>\n<meta property=\"og:description\" content=\"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/synchronyfinancial\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-03T17:23:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Timothy Mathis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@synchrony\" \/>\n<meta name=\"twitter:site\" content=\"@synchrony\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Timothy Mathis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\"},\"author\":{\"name\":\"Timothy Mathis\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\"},\"headline\":\"How to get selected value of dropdown in React.js?\",\"datePublished\":\"2024-05-03T17:23:06+00:00\",\"dateModified\":\"2024-05-03T17:23:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\"},\"wordCount\":687,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"articleSection\":[\"Learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\",\"name\":\"How to get selected value of dropdown in React.js?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-05-03T17:23:06+00:00\",\"dateModified\":\"2024-05-03T17:23:06+00:00\",\"description\":\"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/namso-gen.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get selected value of dropdown in React.js?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"description\":\"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co\",\"publisher\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/namso-gen.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#organization\",\"name\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\",\"url\":\"https:\/\/namso-gen.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"contentUrl\":\"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png\",\"width\":500,\"height\":164,\"caption\":\"Namso Gen Blog - Free Credit Card Generator [100% Valid]\"},\"image\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/synchronyfinancial\",\"https:\/\/twitter.com\/synchrony\",\"https:\/\/www.youtube.com\/synchronyfinancial\",\"https:\/\/www.instagram.com\/synchrony\",\"https:\/\/www.linkedin.com\/company\/synchrony-financial\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\",\"name\":\"Timothy Mathis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Timothy Mathis\"},\"description\":\"Guest author Timothy Mathis has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get selected value of dropdown in React.js?","description":"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"How to get selected value of dropdown in React.js?","og_description":"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected","og_url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/","og_site_name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","article_publisher":"https:\/\/www.facebook.com\/synchronyfinancial","article_published_time":"2024-05-03T17:23:06+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2024\/03\/faq.png","type":"image\/png"}],"author":"Timothy Mathis","twitter_card":"summary_large_image","twitter_creator":"@synchrony","twitter_site":"@synchrony","twitter_misc":{"Written by":"Timothy Mathis","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/"},"author":{"name":"Timothy Mathis","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318"},"headline":"How to get selected value of dropdown in React.js?","datePublished":"2024-05-03T17:23:06+00:00","dateModified":"2024-05-03T17:23:06+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/"},"wordCount":687,"commentCount":0,"publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"articleSection":["Learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/","url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/","name":"How to get selected value of dropdown in React.js?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-05-03T17:23:06+00:00","dateModified":"2024-05-03T17:23:06+00:00","description":"React.js is a powerful JavaScript library widely used for building user interfaces. One common task developers often encounter is getting the selected","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-of-dropdown-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/namso-gen.co\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get selected value of dropdown in React.js?"}]},{"@type":"WebSite","@id":"https:\/\/namso-gen.co\/blog\/#website","url":"https:\/\/namso-gen.co\/blog\/","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","description":"In Namso gen blog you can get many tips regarding to Credit cards, VCC, Credit card security etc. You can generate credit cards by using Namso-gen.co","publisher":{"@id":"https:\/\/namso-gen.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/namso-gen.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/namso-gen.co\/blog\/#organization","name":"Namso Gen Blog - Free Credit Card Generator [100% Valid]","url":"https:\/\/namso-gen.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","contentUrl":"https:\/\/namso-gen.co\/blog\/wp-content\/uploads\/2020\/07\/namso-gen-logo.png","width":500,"height":164,"caption":"Namso Gen Blog - Free Credit Card Generator [100% Valid]"},"image":{"@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/synchronyfinancial","https:\/\/twitter.com\/synchrony","https:\/\/www.youtube.com\/synchronyfinancial","https:\/\/www.instagram.com\/synchrony","https:\/\/www.linkedin.com\/company\/synchrony-financial"]},{"@type":"Person","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318","name":"Timothy Mathis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Timothy Mathis"},"description":"Guest author Timothy Mathis has meticulously crafted and revised this article to the best of their knowledge and understanding. Readers are strongly advised to exercise caution, verify information independently, and rely on their own judgment when considering the information provided. Read more articles on Namso Gen here."}]}},"_links":{"self":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/comments?post=258359"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media\/107420"}],"wp:attachment":[{"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/media?parent=258359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=258359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=258359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}