title: "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
body: <p>Hi I have been stuck in a React Function <code>useState</code>. I just want to learn hooks and useState, but I can not have any progress even struggling too much to find a solution. Here is my full react function:</p>
  
  <pre><code>import React, { useState } from 'react';
  import './MainPart.css';
  
  function MainPart(props) {
    const [orderData_, setOrderData_] = useState(props.orderData);
  
    let topicData_ = props.topicData;
    let titleData_ = props.titleData;
    let infoData_ = props.infoData;
  
    return (
      &lt;div className='MainPart'&gt;
        &lt;div className='mainWindow'&gt;{getPics(orderData_)}&lt;/div&gt;
        &lt;div className='information'&gt;
          &lt;div className='moreNewsDivs'&gt;
            &lt;div className='moreNewsDiv1'&gt;
              &lt;h4&gt;MORE NEWS&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div className='moreNewsDiv2'&gt;
              &lt;button
                className='previous-round'
                onClick={setOrderData_(previous(orderData_))}
              &gt;
                &amp;#8249;
              &lt;/button&gt;
              &amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;
              &lt;button href='/#' className='next-round'&gt;
                &amp;#8250;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;div className='topicDiv'&gt;
            &lt;h5 className='topicData'&gt;{topicData_}&lt;/h5&gt;
            &lt;h5 className='titleData'&gt;{titleData_}&lt;/h5&gt;
            &lt;h6 className='infoData'&gt;{infoData_}&lt;/h6&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  function previous(orderData_) {
    let newOrderData;
  
    if (orderData_ === 3) {
      newOrderData = 2;
      console.log(newOrderData);
      return newOrderData;
    } else if (orderData_ === 1) {
      newOrderData = 3;
      console.log(newOrderData);
      return newOrderData;
    } else {
      newOrderData = 1;
      console.log(newOrderData);
      return newOrderData;
    }
  }
  
  function next(orderData_) {
    let newOrderData;
  
    if (orderData_ === 3) {
      newOrderData = 1;
    } else if (orderData_ === 2) {
      newOrderData = 3;
    } else {
      newOrderData = 2;
    }
    return newOrderData;
  }
  
  const getPics = picOrder =&gt; {
    if (picOrder === 1) {
      return (
        &lt;img
          src={require('../assets/desktopLarge/mainImage.png')}
          className='MainImage'
          alt=''
          id='mainImage'
        /&gt;
      );
    } else if (picOrder === 2) {
      return (
        &lt;img
          src={require('../assets/desktopLarge/bridge.png')}
          className='MainImage'
          alt=''
          id='mainImage'
        /&gt;
      );
    } else {
      return (
        &lt;img
          src={require('../assets/desktopLarge/forest.png')}
          className='MainImage'
          alt=''
          id='mainImage'
        /&gt;
      );
    }
  };
  
  export default MainPart;
  </code></pre>
  
  <p>I am getting an error while using <code>useState</code>. Even loading the page fresh and not pressed to anything my buttons onClick event listener activated and As I mentioned before at the topic My Error: </p>
  
  <blockquote>
    <p>"Error: Too many re-renders. React limits the number of renders to
    prevent an infinite loop."</p>
  </blockquote>