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 (
    
  );
}

//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
      
        
        
        
        منشآت
        
        {/*============= ScrollToTop Section Starts Here =============*/}
        
          
            
          
        
        
          
        
        
        {/*============= ScrollToTop Section Ends Here =============*/}
        {/*============= Header Section Starts Here =============*/}
        
          
            
              
                
                  
                    
                  
                
                
                  الصفحة الرئيسية
                
              
              
                
                  {/*Here we need to change the herf link*/}
                  الوثائق و المحفوظات
                
                
                  الأخبار
                
                
                  {/*Here we need to change the herf link*/}
                  التغريدات
                
                {/*Here we need to change the herf link*/}
                {/* I want to know the difference between the two below */}
                
                  
                    تسجيل دخول
                  
                
              
              
                
                
                
              
              {/*  */}
              {/*Here we need to change the herf link*/}
              {/* تسجيل دخول
           */}
            
          
        
        {/*============= Header Section Ends Here =============*/}
        {/*============= Banner Section Starts Here =============*/}
        
          
            
              
                مرحباً بك في قسم الوثائق والمحفوظات
              
              
                يحتوي هذا القسم على الوثائق والمحفوظات المعتمدة من المركز الوطني
                للوثائق والمحفوظات
              
              
                
                
              
            

          

        

        {/*============= Banner Section Ends Here =============*/}
        {/*============= How Search Section Starts Here =============*/}
        
          
            
              
                {/*begin::Body*/}
                
                  {/*begin::Form*/}
                  
                    {/*begin::Categories*/}
                    
                      
                        التنصيفات
                      
                      {/* start dropdown menue */}
                      
                        
                        
                          
                            أمر ملكي
                          
                          
                            مرسوم ملكي
                          
                          
                            قرار مجلس الوزراء
                          
                          
                            أمر سامي
                          
                          
                            قرار وزاري
                          
                          
                            قرار مجالس وهيئات
                          
                          
                            قرار إداري
                          
                          
                            توجيه سامي
                          
                        
                      

                      
                        
                        
                          
                            الاتفاقيات و المعادات الدولية العامة
                          
                          
                            الاتفاقيات الدولية الثنائية
                          
                          
                            الاتفاقيات الدولية متعددة الأطراف
                          
                        
                      
                    
                    {/* end dropdown menue */}
                    {/* Start: : DateRangePickerComponent */}
                    
                    {/* End: : DateRangePickerComponent */}
                    {/*end::Categories*/}
                    
                    
                  
                  {/*end::Form*/}
                
                {/*end::Body*/}
              
              
                {this.state.noPlaceFound ? (
                  
                    
                    لا يوجد نتائج
                  
                ) : (
                  this.state.NCARMap.map((v) => CreateCards(v._source))
                )}
                {console.log(this.state.NCARMap)}
              
            
          
        
        {/*============= How Search Section Ends Here =============*/}
        {/*============= Footer Section Starts Here =============*/}
        
          
          
            
              
                
              
            
          
          
            جميع الحقوق محفوظة © 2021
          
        
        {/*============= Footer Section Ends Here =============*/}
      

    );
  }
}

Harshit Rastogi · Accepted Answer

Firstly change the onclick function

 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) => {
    ....
    ....
    ....
    })
}

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

Answers (2)

Related Questions