title: Re-rendering in my React sending email form
body: <p>This is for api re-rendering issue, I want to know that how to call one api after selecting a dropdown option.</p>
  <p>Here it re-render infinite time after selecting an-option in drop-down. I call an client Api from client collection and show in client drop down after I select drop down and going to the infinite loop.</p>
  <pre><code>import Select from &quot;react-select&quot;;
  import Axios from &quot;axios&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  export default function Form() {
    const [hday, setHday] = useState(null);
    const [date, setDate] = useState(null);
    const [hdata, setHdata] = useState([]);
    const [hid, setHid] = useState(&quot;&quot;); //changed use state value null to []
    const [client, setClient] = useState([]);
    const [clientvalue, setClientValue] = useState(null);
    const [clientId, setClientId] = useState(&quot;&quot;); //changed use state value null to []
    const [cemail, setCemail] = useState([]);
    const [clientname, setClientname] = useState(null);
    const [clientEmail, setClientEmail] = useState([]);
    const [message, setMessage] = useState(&quot;&quot;);
    const [fromField, setFromField] = useState(&quot;&quot;);
    const [loading, setLoading] = useState(false);
  
    const handleRequest = async (e) =&gt; {
      if (clientvalue &amp;&amp; hday &amp;&amp; fromField &amp;&amp; cemail &amp;&amp; clientEmail &amp;&amp; message !== &quot;&quot;) {
        if (message !== &quot;&quot;) {
          e.preventDefault();
          setLoading(true);
          console.log({
            clientvalue,
            hday,
            fromField,
            cemail,
            clientEmail,
            message,
          });
  
          const body = {
            clientvalue,
            hday,
            fromField,
            cemail,
            clientEmail,
            message,
          };
  
          await Axios.post(&quot;http://localhost:3002/mail&quot;, body, {
            headers: {
              &quot;Content-type&quot;: &quot;application/json&quot;,
            },
          })
            .then((res) =&gt; {
              alert(&quot;Email Sent Successfully&quot;);
              setLoading(false);
              console.log(res);
              window.location.reload();
            })
            .catch((err) =&gt; {
              console.log(err);
              setLoading(false);
            });
        } else {
          alert(&quot;Compose Email&quot;);
        }
      } else {
        alert(&quot;Please fill all required filled&quot;);
      }
    };
  
    const fromFieldChange = (obj) =&gt; {
      setFromField(obj.target.value);
    };
  
    const handleQuillChange = (e) =&gt; {
      setMessage(e.target.value);
    };
  
    function handleHolidayChange(obj) {
      console.log(&quot;This is object country&quot;, obj);
  
      setHday(obj);
      setHid(obj._id);
      setDate(null);
    }
  
    //client call (repetadely call)
    const onChangeClient = (obj) =&gt; {
      console.log(&quot;client object&quot;, obj);
      console.log(&quot;client object id&quot;, obj._id);
      setClientValue(obj);
      setClientId(obj._id);
      setClientname(obj.client_name);
    };
    // console.log(&quot;This is client id and name&quot;, clientId + &quot; &quot; + clientname);
  
    //(issues repetadely execute)
  
    async function emailClick() {
      const url = `http://localhost:3002/api/getClientEmail/${clientId}/${clientname}`;
      Axios.get(url)
        .then((response) =&gt; {
          const temp = response.data.map((e) =&gt; e.email);
          setCemail(temp);
          console.log(&quot;Client Email&quot;, cemail);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    }
    emailClick();
  
    const changeDate = async function dateClick() {
      const url = `http://localhost:3002/api/holiday_date/${hid}`;
      await Axios.get(url)
        .then((response) =&gt; {
          // console.log(&quot;This is holiday date&quot;,response.data[0]['date_of_holiday']);
          setDate(response.data.date_of_holiday);
          // console.log(&quot;holiday year&quot;,date);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    };
    changeDate();
  
    useEffect(
      () =&gt; {
        async function getHoliday() {
          const url = `http://localhost:3002/api/holidays`;
          await Axios.get(url)
            .then((response) =&gt; {
              setHdata(response.data);
              console.log(&quot;this is holiday&quot;, response.data);
            })
            .catch((err) =&gt; {
              console.log(err);
            });
        }
        getHoliday();
  
        async function getClient() {
          const url = `http://localhost:3002/api/client`;
          await Axios.get(url)
            .then((response) =&gt; {
              setClient(response.data);
              console.log(&quot;this is client&quot;, response.data);
            })
            .catch((err) =&gt; {
              console.log(err);
            });
        }
        getClient();
        ///api/emailtemplates
        async function getClientEmail() {
          const url = `http://localhost:3002/api/emailtemplates`;
          await Axios.get(url)
            .then((response) =&gt; {
              setClientEmail(response.data.map((e) =&gt; e.subject));
            })
            .catch((err) =&gt; {
              console.log(err);
            });
        }
        getClientEmail();
      },
      [date],
      [cemail],
    );
    return (
      &lt;form onSubmit={handleRequest} method=&quot;post&quot;&gt;
        &lt;div className=&quot;form&quot;&gt;
          &lt;div className=&quot;form__wrapper&quot;&gt;
            &lt;div className=&quot;form__title&quot;&gt;
              {/* title */}
              &lt;h4&gt;Holiday&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form__container&quot;&gt;
              &lt;div className=&quot;form__containerItems&quot;&gt;
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;Client&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;Select
                      onChange={onChangeClient}
                      placeholder=&quot;Select Client&quot;
                      value={clientvalue}
                      options={client}
                      getOptionLabel={(x) =&gt; x.client_name}
                      getOptionValue={(x) =&gt; x._id}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;Holiday&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;Select
                      onChange={handleHolidayChange}
                      placeholder=&quot;Select Holiday&quot;
                      value={hday}
                      options={hdata}
                      getOptionLabel={(x) =&gt; x.holiday_name}
                      getOptionValue={(x) =&gt; x._id}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;Date&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;input type=&quot;text&quot; placeholder=&quot;date...&quot; defaultValue={date} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form__container&quot;&gt;
              &lt;div className=&quot;form__containerItems&quot;&gt;
                {/* from */}
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;From&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;input
                      type=&quot;email&quot;
                      placeholder=&quot;Sender Email..&quot;
                      // autoFocus=&quot;autoFocus&quot;
                      value={fromField}
                      onChange={fromFieldChange}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                {/* to */}
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;To&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;input type=&quot;text&quot; placeholder=&quot;Client Emial..&quot; defaultValue={cemail} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                {/* Subject */}
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;Subject&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form__containerItemField&quot;&gt;
                    &lt;input type=&quot;text&quot; placeholder=&quot;Write your Sub...&quot; defaultValue={clientEmail} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;form__containerItemName&quot;&gt;
                    &lt;label&gt;Compose Mail&lt;/label&gt;
                    &lt;button
                      disabled={loading}
                      onClick={handleRequest}
                      type=&quot;submit&quot;
                      className=&quot;btn btn-info&quot;
                    &gt;
                      Send
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form__containerItem&quot;&gt;
                  &lt;div className=&quot;container__composeMail&quot;&gt;
                    &lt;textarea
                      value={message}
                      onChange={handleQuillChange}
                      className=&quot;quill&quot;
                      placeholder=&quot;Enter Content from here...&quot;
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>