{"id":258336,"date":"2024-04-10T21:04:44","date_gmt":"2024-04-10T21:04:44","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=258336"},"modified":"2024-04-10T21:04:44","modified_gmt":"2024-04-10T21:04:44","slug":"how-to-get-selected-value-from-dropdown-in-react-js","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/","title":{"rendered":"How to get selected value from dropdown in React.js?"},"content":{"rendered":"<p>React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to retrieve the selected value from a dropdown menu.  Whether you are a beginner or an experienced React.js developer, this article will guide you on how to get the selected value from a dropdown menu in React.js.<\/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-from-dropdown-in-react-js\/#How_to_get_selected_value_from_dropdown_in_Reactjs\" title=\"How to get selected value from dropdown in React.js?\">How to get selected value from 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-from-dropdown-in-react-js\/#Frequently_Asked_Questions\" title=\"Frequently Asked Questions\">Frequently Asked Questions<\/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-from-dropdown-in-react-js\/#1_How_can_I_set_an_initial_selected_value_for_the_dropdown\" title=\"1. How can I set an initial selected value for the dropdown?\">1. How can I set an initial selected 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-from-dropdown-in-react-js\/#2_How_can_I_programmatically_change_the_selected_value\" title=\"2. How can I programmatically change the selected value?\">2. How can I programmatically change the selected value?<\/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-from-dropdown-in-react-js\/#3_Can_I_use_a_class_component_instead_of_a_functional_component\" title=\"3. Can I use a class component instead of a functional component?\">3. Can I use a class component instead of a functional component?<\/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-from-dropdown-in-react-js\/#4_How_can_I_get_the_selected_text_instead_of_the_value_from_the_dropdown\" title=\"4. How can I get the selected text instead of the value from the dropdown?\">4. How can I get the selected text instead of the value from the dropdown?<\/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-from-dropdown-in-react-js\/#5_Can_I_have_a_dropdown_with_dynamically_generated_options\" title=\"5. Can I have a dropdown with dynamically generated options?\">5. Can I have a dropdown with dynamically generated options?<\/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-from-dropdown-in-react-js\/#6_What_if_I_want_the_dropdown_to_have_a_placeholder_or_default_value\" title=\"6. What if I want the dropdown to have a placeholder or default value?\">6. What if I want the dropdown to have a placeholder or default value?<\/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-from-dropdown-in-react-js\/#7_How_can_I_disable_the_dropdown_based_on_certain_conditions\" title=\"7. How can I disable the dropdown based on certain conditions?\">7. How can I disable the dropdown based on certain conditions?<\/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-from-dropdown-in-react-js\/#8_Is_it_possible_to_style_the_dropdown_to_match_my_applications_theme\" title=\"8. Is it possible to style the dropdown to match my application&#8217;s theme?\">8. Is it possible to style the dropdown to match my application&#8217;s theme?<\/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-from-dropdown-in-react-js\/#9_Can_I_have_multiple_dropdowns_with_separate_selected_values_in_the_same_component\" title=\"9. Can I have multiple dropdowns with separate selected values in the same component?\">9. Can I have multiple dropdowns with separate selected values in the same component?<\/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-from-dropdown-in-react-js\/#10_How_can_I_perform_an_action_based_on_the_selected_value\" title=\"10. How can I perform an action based on the selected value?\">10. How can I perform an action based on the selected value?<\/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-from-dropdown-in-react-js\/#11_How_can_I_reset_the_selected_value_to_the_initial_state\" title=\"11. How can I reset the selected value to the initial state?\">11. How can I reset the selected value to the initial state?<\/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-from-dropdown-in-react-js\/#12_Can_I_have_a_dropdown_with_multiple_selection_support\" title=\"12. Can I have a dropdown with multiple selection support?\">12. Can I have a dropdown with multiple selection support?<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"How_to_get_selected_value_from_dropdown_in_Reactjs\"><\/span>How to get selected value from dropdown in React.js?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get the selected value from a dropdown in React.js, you can use the built-in `onChange` event handler and state management.<\/p>\n<p>First, define a state variable to hold the selected value. In your functional component, write the following code:<\/p>\n<p>&#8220;`<br \/>\nimport React, { useState } from &#8216;react&#8217;;<\/p>\n<p>const 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};<\/p>\n<p>export default Dropdown;<br \/>\n&#8220;`<\/p>\n<p>In the above code, we use the `useState` hook to initialize the `selectedValue` state variable to an empty string (`&#8221;`). The `handleDropdownChange` function is triggered each time the dropdown value changes, and it updates the `selectedValue` state with the new value.<\/p>\n<p>The `<select>` element has a `value` attribute that binds it to the `selectedValue` state variable, ensuring that the dropdown always reflects the correct value.<\/p>\n<p>Now, whenever the user selects an option from the dropdown, the `handleDropdownChange` function will update the `selectedValue` state accordingly.<\/p>\n<p>To access the selected value from the dropdown later on, simply refer to the `selectedValue` state variable in your component logic.<\/p>\n<p>In summary, to get the selected value from a dropdown in React.js:<br \/>\n1. Use the `useState` hook to define a state variable for the selected value.<br \/>\n2. Handle the `onChange` event of the `<select>` element, and update the state variable with the new value.<br \/>\n3. Access the selected value from the state variable in your component&#8217;s logic.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Frequently_Asked_Questions\"><\/span>Frequently Asked Questions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"1_How_can_I_set_an_initial_selected_value_for_the_dropdown\"><\/span>1. How can I set an initial selected value for the dropdown?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo set an initial selected value for the dropdown, pass the desired value to the initial state of the `selectedValue` variable. For example, `const [selectedValue, setSelectedValue] = useState(&#8216;option2&#8217;);`.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_How_can_I_programmatically_change_the_selected_value\"><\/span>2. How can I programmatically change the selected value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo programmatically change the selected value, update the `selectedValue` state variable using the `setSelectedValue` function with the desired value. For example, `setSelectedValue(&#8216;option1&#8217;);`.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Can_I_use_a_class_component_instead_of_a_functional_component\"><\/span>3. Can I use a class component instead of a functional component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can use a class component instead of a functional component. However, the syntax and implementation will differ slightly. Instead of using hooks, you would use the `setState` method to manage state.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_How_can_I_get_the_selected_text_instead_of_the_value_from_the_dropdown\"><\/span>4. How can I get the selected text instead of the value from the dropdown?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo get the selected text instead of the value, you can access the `event.target.options[event.target.selectedIndex].text` within the event handler function.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Can_I_have_a_dropdown_with_dynamically_generated_options\"><\/span>5. Can I have a dropdown with dynamically generated options?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can generate the options dynamically by mapping over an array of data or using any other method to create the options. Just ensure that you provide a unique `key` prop to each `<option>`.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_What_if_I_want_the_dropdown_to_have_a_placeholder_or_default_value\"><\/span>6. What if I want the dropdown to have a placeholder or default value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can add a default value or a placeholder option as the first option in the dropdown menu, with a value that can be identified as the placeholder value, such as an empty string or `-1`.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_How_can_I_disable_the_dropdown_based_on_certain_conditions\"><\/span>7. How can I disable the dropdown based on certain conditions?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can add a `disabled` attribute to the `<select>` element and conditionally set it to `true` or `false` based on your conditions.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Is_it_possible_to_style_the_dropdown_to_match_my_applications_theme\"><\/span>8. Is it possible to style the dropdown to match my application&#8217;s theme?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can apply your own CSS or use libraries like Bootstrap or Material UI to style the dropdown and make it consistent with your application&#8217;s theme.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Can_I_have_multiple_dropdowns_with_separate_selected_values_in_the_same_component\"><\/span>9. Can I have multiple dropdowns with separate selected values in the same component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can have multiple dropdowns with separate selected values by using separate state variables and event handlers for each dropdown.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_How_can_I_perform_an_action_based_on_the_selected_value\"><\/span>10. How can I perform an action based on the selected value?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYou can invoke a function or execute a piece of code within the `handleDropdownChange` function, after updating the `selectedValue` state, to perform any actions based on the selected value.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_How_can_I_reset_the_selected_value_to_the_initial_state\"><\/span>11. How can I reset the selected value to the initial state?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nTo reset the selected value to the initial state, you can set the `selectedValue` state variable back to its initial value, either directly or by invoking a separate function to handle the reset.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"12_Can_I_have_a_dropdown_with_multiple_selection_support\"><\/span>12. Can I have a dropdown with multiple selection support?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\nYes, you can enable multiple selection support by adding the `multiple` attribute to the `<select>` element, and handling the `onChange` event accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to retrieve the selected value from a dropdown menu. Whether you are a beginner or an experienced React.js developer, this article will guide you on how to get the selected value from a &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to get selected value from dropdown in React.js?\" class=\"read-more button\" href=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/#more-258336\">Read more<span class=\"screen-reader-text\">How to get selected value from 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-258336","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 from dropdown in React.js?<\/title>\n<meta name=\"description\" content=\"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to\" \/>\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-from-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 from dropdown in React.js?\" \/>\n<meta property=\"og:description\" content=\"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-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-04-10T21:04:44+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=\"4 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-from-dropdown-in-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/\"},\"author\":{\"name\":\"Timothy Mathis\",\"@id\":\"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318\"},\"headline\":\"How to get selected value from dropdown in React.js?\",\"datePublished\":\"2024-04-10T21:04:44+00:00\",\"dateModified\":\"2024-04-10T21:04:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/\"},\"wordCount\":774,\"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-from-dropdown-in-react-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/\",\"url\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/\",\"name\":\"How to get selected value from dropdown in React.js?\",\"isPartOf\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/#website\"},\"datePublished\":\"2024-04-10T21:04:44+00:00\",\"dateModified\":\"2024-04-10T21:04:44+00:00\",\"description\":\"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to\",\"breadcrumb\":{\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-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 from 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 from dropdown in React.js?","description":"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to","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-from-dropdown-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"How to get selected value from dropdown in React.js?","og_description":"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to","og_url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-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-04-10T21:04:44+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/#article","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/"},"author":{"name":"Timothy Mathis","@id":"https:\/\/namso-gen.co\/blog\/#\/schema\/person\/ffa5be155490b2344e28f672fcc1e318"},"headline":"How to get selected value from dropdown in React.js?","datePublished":"2024-04-10T21:04:44+00:00","dateModified":"2024-04-10T21:04:44+00:00","mainEntityOfPage":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/"},"wordCount":774,"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-from-dropdown-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/","url":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/","name":"How to get selected value from dropdown in React.js?","isPartOf":{"@id":"https:\/\/namso-gen.co\/blog\/#website"},"datePublished":"2024-04-10T21:04:44+00:00","dateModified":"2024-04-10T21:04:44+00:00","description":"React.js is a popular JavaScript framework used for building user interfaces. Dropdown menus are common in web applications, and often developers need to","breadcrumb":{"@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-dropdown-in-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/namso-gen.co\/blog\/how-to-get-selected-value-from-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 from 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\/258336","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=258336"}],"version-history":[{"count":0,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/posts\/258336\/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=258336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/categories?post=258336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namso-gen.co\/blog\/wp-json\/wp\/v2\/tags?post=258336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}