title: I want to get selected value from select options on button click in react.js
body: <p>I want to get the selected value from the dropdown on button click and then I want to save it in the firebase database. Everything is working fine except dropdown. I also want to add a dropdown value in the firebase database. Anyone can help me how can I get it? I'm trying but it is giving error. Anyone can help me?</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Select from 'react-select';
  import firebase from '../config/firebase.js';
  
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];
  
  class PostAd extends React.Component {
    constructor() {
      super();
      this.state = {
        selectedOption: null,
        ads: [],
      };
    }
  
    handleClick = () =&gt; {
      firebase.database().ref('/').child('ads').push(this.state);
      console.log(`Option selected:`, selectedOption);
    };
  
    handleChange = (e) =&gt; {
      this.setState({
        selectedOption,
        [e.target.name]: e.target.value,
      });
      console.log(`Option selected:`, selectedOption);
    };
  
    render() {
      const { selectedOption } = this.state;
      return (
        &lt;div className=&quot;container postAd-container&quot;&gt;
          &lt;h6 className=&quot;p-3&quot;&gt;CHOOSE A CATEGORY&lt;/h6&gt;
          &lt;hr /&gt;
  
          &lt;Select value={selectedOption} onChange={this.handleChange} options={options} /&gt;
  
          &lt;div className=&quot;p-3&quot;&gt;
            &lt;div className=&quot;&quot;&gt;
              &lt;p&gt;Condition *&lt;/p&gt;
              &lt;button className=&quot;btn-attributes&quot; name=&quot;new&quot; value=&quot;new&quot; onClick={this.handleChange}&gt;
                New
              &lt;/button&gt;
              &lt;button className=&quot;btn-attributes&quot; name=&quot;used&quot; value=&quot;used&quot; onClick={this.handleChange}&gt;
                Used
              &lt;/button&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;pt-2&quot;&gt;
              &lt;p&gt;Type *&lt;/p&gt;
              &lt;button className=&quot;btn-attributes&quot;&gt;Apple&lt;/button&gt;
              &lt;button className=&quot;btn-attributes&quot;&gt;Dany Tabs&lt;/button&gt;
              &lt;button className=&quot;btn-attributes&quot;&gt;Q Tabs&lt;/button&gt;
              &lt;button className=&quot;btn-attributes&quot;&gt;Samsung&lt;/button&gt;
              &lt;button className=&quot;btn-attributes&quot;&gt;Other Tablets&lt;/button&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;pt-5&quot;&gt;
              &lt;p&gt;Ad Title *&lt;/p&gt;
              &lt;div className=&quot;form-group row&quot;&gt;
                &lt;div className=&quot;col-sm-6&quot;&gt;
                  &lt;input
                    type=&quot;email&quot;
                    name=&quot;adTitle&quot;
                    onChange={this.handleChange}
                    className=&quot;form-control form-control-lg&quot;
                  /&gt;
  
                  &lt;p className=&quot;font-11&quot;&gt;Mention the key features of your item (e.g. brand, model, age, type) 0 / 70&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;pt-5&quot;&gt;
              &lt;p&gt;Description *&lt;/p&gt;
              &lt;div className=&quot;form-group row&quot;&gt;
                &lt;div className=&quot;col-sm-6&quot;&gt;
                  &lt;textarea name=&quot;description&quot; onChange={this.handleChange} className=&quot;form-control&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;
                  &lt;p className=&quot;font-11&quot;&gt;Include condition, features and reason for selling 0 / 4096&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
  
          &lt;div className=&quot;p-4&quot;&gt;
            &lt;div className=&quot;&quot;&gt;
              &lt;h6&gt;SET A PRICE&lt;/h6&gt;
              &lt;div className=&quot;form-group row&quot;&gt;
                &lt;div className=&quot;col-sm-6&quot;&gt;
                  &lt;div className=&quot;input-group mb-2&quot;&gt;
                    &lt;div className=&quot;input-group-prepend&quot;&gt;
                      &lt;div className=&quot;input-group-text&quot;&gt;Rs&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;input type=&quot;number&quot; name=&quot;price&quot; onChange={this.handleChange} className=&quot;form-control&quot; /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;form-row pb-3&quot;&gt;
            &lt;div className=&quot;col-md-12 text-center&quot;&gt;
              &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot; onClick={this.handleClick}&gt;
                Post Ad
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default PostAd;
  </code></pre>