title: how should I build onClick action in my react component + Redux
body: <p>I've been through many tutorials and questions on Stack but I can't find a solution. I'm just learning React/redux, trying to build OnClick action. I've got the following error <code>"Maximum call stack size exceeded error"</code>. I got this because I'm rendering a function that's changing my state infinitely. I'm trying to deal with my <code>&lt;button onClick={DisplayTable(click)}&gt;cool&lt;/button&gt;</code> differently but nothing seems to work.
  I also know that my action and I guess my reducers works properly since when I'm dispatching my action trough the console : <code>$r.store.dispatch({type: 'SET_TABLE_DATA'});</code>, my state is updated properly. </p>
  
  <p>Any advices ? </p>
  
  <p>here is my action : </p>
  
  <pre><code>export const setTableFilter = (click) =&gt; {
    return {
      type: 'SET_TABLE_DATA',
      click : click,
    };
  };
  </code></pre>
  
  <p>here is my reducer :</p>
  
  <pre><code>const tableFilter = (state = 0, action) =&gt; {
      if(action.type === 'SET_TABLE_DATA') {
          return state + 1;
      }
          return state;
    }
  </code></pre>
  
  <p>and here is my component :</p>
  
  <pre><code>const DisplayTable = (click) =&gt; {
  
          return (
          &lt;div&gt;
              &lt;button onClick={DisplayTable(click)}&gt;cool&lt;/button&gt;
          &lt;/div&gt; )
      }
  
  
  function mapStateToProps(state) {
    return {
        click: state.tableFilter.click
    };
  };
  
  
  const mapDispachToProps = (dispatch) =&gt; {
      return {
    DisplayTable: (click) =&gt; {dispatch (setTableFilter(click));
          },
      };
  };
  
  const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable);
  
  export default AppTable;
  </code></pre>
  
  <p>I also know that I should build my reducer in a way that my state should be updated without any mutation, however I'll keep this for later ! :)</p>
  
  <p>thanks.</p>