Accepted answer

The answer given doesn't really explain why your code was not working, so I thought I'd expand on that.

Your problem is that you are exceeding the function call stack, more commonly known as infinite recursion. The reason this is happening is because you aren't passing a function to the onClick attribute of your button, but rather invoking a function and passing its return value instead. So the following scenario is happening:

  • React component is mounted to the DOM
  • render() is called
  • The DisplayTable function is invoked, which dispatches an update to the store
  • The store updates, and passes new props to the React component
  • render() is called again
  • DisplayTable is invoked again

...and so on.

What you'll want to do instead is pass the function to the button's onClick attribute. So your component should look like this:

const Component = props => {
    return (
            <button onClick={props.DisplayTable}>cool</button>

In that above code snippet, I removed your click prop because it doesn't look like you're using it at all (given the code you posted in the OP).


A few tips, not a complete solution since that would not help you learn:

Your action and reducer are looking fine. You are passing the click property which is not used in the reducer. Maybe you will use it in the future but for now it is useless.

A React component function takes props as an argument:

const Comp = props => {
    const click =;
    // ...

mapDispatchToProps is usually not needed. Use plain objects instead:

connect(state => state.tableFilter, { setTableFilter })(DisplayTable);

You can then access the function from props:

<button onClick={() => props.setTableFilter(click)}>cool</button>

Keep in mind: onClick takes a function!

Also the state you defined in the reducer has no property called click, instead it is a number (see correct mapStateToProps function above)

Related Query

More Query from same tag