How to handle change of onClick on dropdown menu in react.js

Question

I need your advice and suggest, I have here a react app that has three main component: search bar, cards, and filters. In the filters I have a drop down menu that contain at least 11 vlaues. so what I want that I create function that handle the change when I onclick one of the values and search for it.

I face two problems:

how to create on handle function for 11 elements
how to search for it after one click, because I try to test with one element and change after two clicks

The code:

//Function to create the cards with their property values
function CreateCards(doc) {
  return (
    <SimpleCard
      key={doc.id}
      theCardId={doc.id}
      cardType={doc.approvetool}
      cardNum={doc.num}
      cardName={doc.name}
      cardDate={format(new Date(doc.date), "dd/MM/yyyy")} // casting the system date to arabic date
      // cardCategory={NCARMap.cardCategory}
      // cardSource={NCARMap.cardSource}
      cardDesc={doc.summary}
      cardURL={doc.image}
    />
  );
}

//create the class
export default class OfficialDocument extends Component {
  //constructor elements
  constructor(props) {
    super(props);

    //initially no data entered
    this.state = {
      NCARMap: [], // for print cards and changeable
      NCARMapAS: [], // for print cards and unchangeable (Default value always)
      search_query: "", // store the query word
      search_query_drop: "", // to store the query word of drop down menu
      noPlaceFound: false, // condition to print message when no result up
      size_query: 0, // for set the size or number of docs to return
      highlight: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.DropDownChangeOne = this.DropDownChangeOne.bind(this);
  }

  componentDidMount() {
    //Get NCARMap data, NCARMapAS used for filtering and sorting the cards once get the page
    axios
      .get(
        "http://localhost:9200/ncar_index/ncar/_search?size=100&sort=date:desc"
      ) //size to define the total docs to get / sort: sort the data for which field you want: asc or desc (desc for reverse)
      .then((resp) => {
        console.log(resp);
        this.setState({
          NCARMap: resp.data.hits.hits,
          NCARMapAS: resp.data.hits.hits,
        });
      });
  }

  //function that handle the onChange on searchbar
  handleChange(event) {
    console.log(event.target.value);
    this.setState({
      search_query: event.target.value,
      highlight: event.target.value,
    });
    axios
      .get(
        `http://localhost:9200/ncar_index/ncar/_search?q=${this.state.search_query}&size=100&sort=date:desc&analyzer=whitespace`
      )
      .then((resp) => {
        if (event?.target?.value == "") {
          // if the searchbar empty set default cards
          this.setState({
            NCARMap: this.state.NCARMapAS,
            noPlaceFound: false,
          });
        } else {
          if (resp.data.hits.hits.length > 0 && this.state.search_query != "") {
            // go for new search when there is a result and searchbar not empty
            this.setState({
              NCARMap: resp.data.hits.hits,
              noPlaceFound: false,
            });
            console.log("Successful");
          } else {
            // if there is no result make noplacefount true to print a message and show no card
            if (resp.data.hits.hits.length == 0) {
              this.setState({ noPlaceFound: true });
              console.log("Length is equal 0");
            }
          }
        }
      });
  }

  DropDownChangeOne(event) {
    console.log("lol");
    this.setState({
      search_query_drop: "approvetool:أمر",
    });
    console.log(this.state.search_query_drop);
    axios
      .get(
        `http://localhost:9200/ncar_index/ncar/_search?q=${this.state.search_query_drop}&size=100&sort=date:desc`
      )
      .then((resp) => {
        if (this.state.search_query_drop == "") {
          // if the searchbar empty set default cards
          this.setState({
            NCARMap: this.state.NCARMapAS,
            noPlaceFound: false,
          });
        } else {
          if (
            resp.data.hits.hits.length > 0 &&
            this.state.search_query_drop != ""
          ) {
            // go for new search when there is a result and searchbar not empty
            this.setState({
              NCARMap: resp.data.hits.hits,
              noPlaceFound: false,
            });
            console.log("Successful");
          } else {
            // if there is no result make noplacefount true to print a message and show no card
            if (resp.data.hits.hits.length == 0) {
              this.setState({ noPlaceFound: true });
              console.log("Length is equal 0");
            }
          }
        }
      });
  }

  render() {
    return (
      //HTML FILE Converted to React
      <div>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
        <title>منشآت</title>
        <link
          rel="shortcut icon"
          href="/images/favicon.png"
          type="image/x-icon"
        />
        {/*============= ScrollToTop Section Starts Here =============*/}
        <div className="overlayer" id="overlayer">
          <div className="loader">
            <div className="loader-inner" />
          </div>
        </div>
        <a href="#0" className="scrollToTop">
          <i className="fas fa-angle-up" />
        </a>
        <div className="overlay" />
        {/*============= ScrollToTop Section Ends Here =============*/}
        {/*============= Header Section Starts Here =============*/}
        <header className="header-section">
          <div className="container">
            <div className="header-wrapper">
              <div className="logo-area">
                <div className="logo">
                  <a href="/">
                    <img src="/images/logo/logo.png" alt="logo" />
                  </a>
                </div>
                <div className="support headFont">
                  <a href="/">الصفحة الرئيسية</a>
                </div>
              </div>
              <ul className="menu headFont">
                <li>
                  {/*Here we need to change the herf link*/}
                  <a href="/OfficialDocument">الوثائق و المحفوظات</a>
                </li>
                <li>
                  <a href="/WasPage">الأخبار</a>
                </li>
                <li>
                  {/*Here we need to change the herf link*/}
                  <a href="/TweetsPage">التغريدات</a>
                </li>
                {/*Here we need to change the herf link*/}
                {/* I want to know the difference between the two below */}
                <li className="d-md-none text-center">
                  <a href="#0" className="m-0 header-button">
                    تسجيل دخول
                  </a>
                </li>
              </ul>
              <div className="header-bar d-lg-none">
                <span style={{ backgroundColor: "#00A7CF" }} />
                <span style={{ backgroundColor: "#00A7CF" }} />
                <span style={{ backgroundColor: "#00A7CF" }} />
              </div>
              {/* <div class="header-right"> */}
              {/*Here we need to change the herf link*/}
              {/* <a href="#0" class="header-button d-none d-md-inline-block">تسجيل دخول</a>
          </div> */}
            </div>
          </div>
        </header>
        {/*============= Header Section Ends Here =============*/}
        {/*============= Banner Section Starts Here =============*/}
        <section
          className="banner-2 bg_img"
          data-background="/images/banner/background3.png"
        >
          <div className="container">
            <div className="banner-content-2">
              <h1 className="title cl-white">
                مرحباً بك في قسم الوثائق والمحفوظات
              </h1>
              <p className=" cl-white">
                يحتوي هذا القسم على الوثائق والمحفوظات المعتمدة من المركز الوطني
                للوثائق والمحفوظات
              </p>
              <form className="search-form round">
                <input
                  type="text"
                  style={{ textAlign: "right", color: "black" }}
                  onChange={this.handleChange}
                  placeholder="... ابحث هنا"
                />
                <button type="submit">
                  <i className="flaticon-search" />{" "}
                  <span className="d-none d-sm-inline-block">ابحث</span>
                </button>
              </form>
            </div>
          </div>
        </section>
        {/*============= Banner Section Ends Here =============*/}
        {/*============= How Search Section Starts Here =============*/}
        <div className="how-search-section padding-bottom mt--93">
          <div className="container">
            <div className="row mb-30-none justify-content-center">
              <div className="filter-rtl">
                {/*begin::Body*/}
                <div className="card-body filters">
                  {/*begin::Form*/}
                  <form>
                    {/*begin::Categories*/}
                    <div className="form-group mb-11">
                      <label className="font-size-h3 font-weight-bolder text-dark mb-7">
                        التنصيفات
                      </label>
                      {/* start dropdown menue */}
                      <div className="dropdown">
                        <button
                          className="btn btn-secondary dropdown-toggle"
                          type="button"
                          id="dropdownMenuButton"
                          data-toggle="dropdown"
                          aria-haspopup="true"
                          aria-expanded="false"
                        >
                          أداة الاعتماد
                        </button>
                        <div
                          className="dropdown-menu"
                          aria-labelledby="dropdownMenuButton"
                        >
                          <a
                            className="dropdown-item"
                            onClick={this.DropDownChangeOne}
                          >
                            أمر ملكي
                          </a>
                          <a className="dropdown-item" href="#">
                            مرسوم ملكي
                          </a>
                          <a className="dropdown-item" href="#">
                            قرار مجلس الوزراء
                          </a>
                          <a className="dropdown-item" href="#">
                            أمر سامي
                          </a>
                          <a className="dropdown-item" href="#">
                            قرار وزاري
                          </a>
                          <a className="dropdown-item" href="#">
                            قرار مجالس وهيئات
                          </a>
                          <a className="dropdown-item" href="#">
                            قرار إداري
                          </a>
                          <a className="dropdown-item" href="#">
                            توجيه سامي
                          </a>
                        </div>
                      </div>

                      <div className="dropdown">
                        <button
                          className="btn btn-secondary dropdown-toggle"
                          type="button"
                          id="dropdownMenuButton"
                          data-toggle="dropdown"
                          aria-haspopup="true"
                          aria-expanded="false"
                        >
                          فئة الوثيقة
                        </button>
                        <div
                          className="dropdown-menu"
                          aria-labelledby="dropdownMenuButton"
                        >
                          <a className="dropdown-item" href="#">
                            الاتفاقيات و المعادات الدولية العامة
                          </a>
                          <a className="dropdown-item" href="#">
                            الاتفاقيات الدولية الثنائية
                          </a>
                          <a className="dropdown-item" href="#">
                            الاتفاقيات الدولية متعددة الأطراف
                          </a>
                        </div>
                      </div>
                    </div>
                    {/* end dropdown menue */}
                    {/* Start: : DateRangePickerComponent */}
                    <DateRangePickerComponent></DateRangePickerComponent>
                    {/* End: : DateRangePickerComponent */}
                    {/*end::Categories*/}
                    <button
                      type="submit"
                      className="btn btn-primary font-weight-bolder mr-2 px-8"
                    >
                      إعادة ضبط
                    </button>
                    <button
                      type="reset"
                      className="btn-submit btn btn-clear font-weight-bolder text-muted px-8"
                    >
                      بحث
                    </button>
                  </form>
                  {/*end::Form*/}
                </div>
                {/*end::Body*/}
              </div>
              <div className="general-card">
                {this.state.noPlaceFound ? (
                  <h3 className="noPlaceFound">
                    <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
                    لا يوجد نتائج
                  </h3>
                ) : (
                  this.state.NCARMap.map((v) => CreateCards(v._source))
                )}
                {console.log(this.state.NCARMap)}
              </div>
            </div>
          </div>
        </div>
        {/*============= How Search Section Ends Here =============*/}
        {/*============= Footer Section Starts Here =============*/}
        <footer className="footer-section pt-70-145">
          <div className="dot-slider bg_img" />
          <div className="container">
            <div className="row mb--50 justify-content-between">
              <div className="col-sm-8 col-lg-4">
                <div className="footer-widget widget-about"></div>
              </div>
            </div>
          </div>
          <div className="footer-bottom cl-white">
            <p>جميع الحقوق محفوظة © 2021</p>
          </div>
        </footer>
        {/*============= Footer Section Ends Here =============*/}
      </div>
    );
  }
}

marc_s · Accepted Answer · 2021-09-02 19:32:26Z

2

Case 1: Using map in this case:

   {
    ["أمر ملكي", ...].map((text, i) => {
     return (
       <a key="i" href="" className="dropdown-item" onClick={() => this.DropDownChangeOne("approvetool:أمر")}> // Your query for each element
        {text}
       </a>
      );
     });
   }

Case 2: Pass query to DropDownChangeOne

DropDownChangeOne(query) {
  this.setState({
    search_query_drop: query,
  });
  axios
    .get(
      `http://localhost:9200/ncar_index/ncar/_search?q=${query}&size=100&sort=date:desc`
    )
    .then((resp) => {
    ...
    });
}

edited Sep 2, 2021 at 19:32

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 2, 2021 at 7:01

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Drsaud Over a year ago

Thank you so much for your effort I appreciate it, it solved thank to Mr.Harshit Rastogi

Viet Over a year ago

Oh I see. And you should add map for the first question

Harshit Rastogi · Accepted Answer · 2021-09-02 06:53:31Z

1

Firstly change the onclick function

<a className="dropdown-item" onClick={(e) => this.DropDownChangeOne(e, 'approvetool:أمر')} >

Then in function:

 DropDownChangeOne(event, value) {
    console.log("lol");
    this.setState({
      search_query_drop: value,
    });
    console.log(value);
    axios
      .get(
        `http://localhost:9200/ncar_index/ncar/_search?q=${value}&size=100&sort=date:desc`
      )
      .then((resp) => {
    ....
    ....
    ....
    })
}

answered Sep 2, 2021 at 6:53

Harshit Rastogi

2,1521 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to handle change of onClick on dropdown menu in react.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related