I want to get selected value from select options on button click in react.js

Question

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?

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 = () => {
    firebase.database().ref('/').child('ads').push(this.state);
    console.log(`Option selected:`, selectedOption);
  };

  handleChange = (e) => {
    this.setState({
      selectedOption,
      [e.target.name]: e.target.value,
    });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container postAd-container">
        <h6 className="p-3">CHOOSE A CATEGORY</h6>
        <hr />

        <Select value={selectedOption} onChange={this.handleChange} options={options} />

        <div className="p-3">
          <div className="">
            <p>Condition *</p>
            <button className="btn-attributes" name="new" value="new" onClick={this.handleChange}>
              New
            </button>
            <button className="btn-attributes" name="used" value="used" onClick={this.handleChange}>
              Used
            </button>
          </div>

          <div className="pt-2">
            <p>Type *</p>
            <button className="btn-attributes">Apple</button>
            <button className="btn-attributes">Dany Tabs</button>
            <button className="btn-attributes">Q Tabs</button>
            <button className="btn-attributes">Samsung</button>
            <button className="btn-attributes">Other Tablets</button>
          </div>

          <div className="pt-5">
            <p>Ad Title *</p>
            <div className="form-group row">
              <div className="col-sm-6">
                <input
                  type="email"
                  name="adTitle"
                  onChange={this.handleChange}
                  className="form-control form-control-lg"
                />

                <p className="font-11">Mention the key features of your item (e.g. brand, model, age, type) 0 / 70</p>
              </div>
            </div>
          </div>

          <div className="pt-5">
            <p>Description *</p>
            <div className="form-group row">
              <div className="col-sm-6">
                <textarea name="description" onChange={this.handleChange} className="form-control" rows="3"></textarea>
                <p className="font-11">Include condition, features and reason for selling 0 / 4096</p>
              </div>
            </div>
          </div>
        </div>
        <hr />

        <div className="p-4">
          <div className="">
            <h6>SET A PRICE</h6>
            <div className="form-group row">
              <div className="col-sm-6">
                <div className="input-group mb-2">
                  <div className="input-group-prepend">
                    <div className="input-group-text">Rs</div>
                  </div>
                  <input type="number" name="price" onChange={this.handleChange} className="form-control" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="form-row pb-3">
          <div className="col-md-12 text-center">
            <button type="submit" className="btn btn-primary" onClick={this.handleClick}>
              Post Ad
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default PostAd;

Answer 1

Make a seperate function this.handleClickButton and use it for New and Used buttons. instead this.handleChange

handleClickButton = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleChange = selectedOption => {
    this.setState({
        selectedOption
      },() => {
        console.log(`Option selected:`, this.state.selectedOption);
      });
  };

This code will change the dropdown without any error.

If you would like to manage both with the same function. Following is the solution:

handleChange = selectedOption => {
    //onClick it will get e.target.value
    if (e.target.value) {
        this.setState({
            [e.target.name]: e.target.value
        });
    } else {
    //onChange it will get the selected option.
        this.setState({
            selectedOption: e
        });
    }
};