title: In React, how to fix the infinite/loop data passing from the child component to parent react functional component
body: <p>I'm using the <code>prop</code> to pass data from the child component to the parent functional component. Both are different js files. Whenever I use <code>prop</code> I'm getting the infinite/loop data passing from the child component. How should I resolve this? <br></p>
  <p>This is making my React app unable to load properly and crash. <br>
  Despite using the below react functional component, I'm able to retrieve the data properly without a loop from the React Class component so I assuming is the <code>CallAPI.js</code> functional class issue <br></p>
  <p>Child component: DropDownList.js <br>
  Something like below...</p>
  <pre><code>class DropDownList extends React.Component {
  
  //--body
    render() {
  
      return (
        &lt;div&gt;
        &lt;CallAPI age={27}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default DropDownList;
  </code></pre>
  <p>Parent Component: CallAPI.js<br>
  Something like below..</p>
  <pre><code>const CallAPI = () =&gt;{ //create a CallAPI function
    
  const [DPID, setText] = useState(&quot;&quot;);
  const [Quote, setText1] = useState(&quot;&quot;);
  
  let gcmpapi =
    &quot;https://gcm.dellsvc/GCM.Order.API/api/v1/orders/&quot;+ DPID +&quot;/purchase-summary-with-details?countryCode=US&quot;; // declare a variable to store the URL
  
  const [finalprice,setGCMP1] = useState('');
  const [totaltax,setGCMP2] = useState('');
  const [ShippingAmount,setGCMP3] = useState('');
  const [CostPrice,setGCMP4] = useState('');
  const [MarginTotal,setGCMP5] = useState('');
  const [ListPrice,setGCMP6] = useState('');
  const [SellingPrice,setGCMP7] = useState('');
  const [DiscountValue,setGCMP8] = useState('');
  
    const callgcmpapi = () =&gt; { //assign a variable for a call function
      Axios.get (gcmpapi).then(
        (response) =&gt; { //Success
        console.log(response);
        setGCMP1(response.data.Data.PurchaseSummary.PriceSummary.FinalPrice); // call the value from the multi-dimensional array
        setGCMP2(response.data.Data.PurchaseSummary.PriceSummary.TaxTotal);
        setGCMP3(response.data.Data.PurchaseSummary.PriceSummary.ShippingAmount);
        setGCMP4(response.data.Data.PurchaseSummary.PriceSummary.CostPrice);
        setGCMP5(response.data.Data.PurchaseSummary.PriceSummary.MarginTotal);
        setGCMP6(response.data.Data.PurchaseSummary.PriceSummary.ListPrice);
        setGCMP7(response.data.Data.PurchaseSummary.PriceSummary.SellingPrice);
        setGCMP8(response.data.Data.PurchaseSummary.PriceSummary.DiscountValue);
        })
    };
  </code></pre>
  <p>Infinite data loop: <a href="https://i.stack.imgur.com/fAwyn.png" rel="nofollow noreferrer">Please see the screenshot</a></p>