I get an Error from React: Maximum update depth exceeded

I wrote my codes and i think everything is right but i get an error from react.js Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

App.js:

    import React, { Component } from 'react';
import Navbar from "./component/Navbar";
import './App.css';
import Users from './component/Users';
class App extends Component {
  state = {
    users: [
      {
        id: 1,
        name: "Jessie Alby",
        salary: "5000",
        department: "Software"
      },
      {
        id: 2,
        name: "John Tyson",
        salary: "10000",
        department: "Engineer"
      },
      {
        id: 3,
        name: "Billie Ashley",
        salary: "6000",
        department: "Doctor"
      }
    ]
  }
  deleteUser =(id) => {
    this.setState({
      users: this.state.users.filter(user => id !== user.id)
    })
  }
  render(){
  return (
    <div className="container">
     <Navbar title='User App2'/>
     <hr/>
     <Users deleteUser={this.deleteUser()} users={this.state.users}/>
    </div>
  );
}
}
export default App;

User.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class User extends Component {
    state = {
        isVisible : false
    }
    static defaultProps = {
        name: "No info",
        salary: "No info",
        department: "No info"
    }
    
    onClickEvent= (e) =>{
        this.setState({
            isVisible: !this.state.isVisible
        })
    }
    onDeleteUser = (e) => {
        const {id,deleteUser} = this.props;
        deleteUser(id);
    }
   
    render() {
        //Destructing
        const {name,department,salary} = this.props;
        const {isVisible} = this.state;
        return (
            <div className="col-md-8 mb-4">
               <div className="card">
                   <div className="card-header d-flex justify-content-between" style={{cursor:"pointer"}}>
        <h4 className="d-inline" onClick={this.onClickEvent.bind(this)}>{name}</h4>
        <i onClick={this.onDeleteUser} className="far fa-trash-alt" style={{cursor:"pointer"}}></i>
                   </div>
                   {
                       isVisible ?  <div className="card-body">
                       <p className="card-text">Salary: {salary}</p>
                       <p className="card-text">Department: {department}</p>
                                  </div> : null
                   }
               </div>
            </div>
        )
    }
}
User.propTypes = {
    name: PropTypes.string.isRequired,
    salary: PropTypes.string.isRequired,
    department: PropTypes.string.isRequired,
    deleteUser: PropTypes.func.isRequired
}
export default User;

Users.js

import React, { Component } from 'react';
import User from "./User";
import PropTypes from 'prop-types';
class Users extends Component {
    render() {
          const {users,deleteUser} = this.props;
        return (
            <div>
                {
                 users.map(user=>{
                    return(
                        <User 
                        key={user.id}
                        id={user.id}
                        name={user.name}
                        salary={user.salary}
                        department={user.department}
                        deleteUser={deleteUser}
                        />
                    )
                })
            }
            </div>
        )
    }
}
Users.propTypes = {
    users: PropTypes.array.isRequired,
    deleteUser: PropTypes.func.isRequired
}
export default Users;

Answer

It probably has something to do with this:

<Users deleteUser={this.deleteUser()} users={this.state.users}/>

When you put () at the end of the function what you are doing is calling it (executing it). When you want to pass it you have to do it like this:

<Users deleteUser={this.deleteUser} users={this.state.users}/>