Passing action to nested child components

[aftabnaveed]

Hey Bucky,
You are awesome! man, ok let's get serious now :-) . I have the following structure

UserPage -> Container
|-----UserList -> Dumb Component
|--- User ->Dumb Component

My action and dispatch obviously is connected to container which is UserPage

function mapStateToProps(state) {
    return {
        users: state.users
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({deleteUser: deleteUser}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(UserPage);

Now I am passing deleteUser action to the UserList Component as

and then from UserList to the User as

userList() {
        return this.props.users.map(function(user, i){
            return(
                <User key={i} user={user} deleteUser={this.props.deleteUser} />
            );
        });
    }

and finally my leaf component User has this code

class User extends React.Component {

    render() {
        console.info(this.props.deleteUser);
        var user = this.props.user
        return(
            <tr>
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.createdAt}</td>
                <td>{user.updatedAt}</td>
                <td>
                    <a href="#" onClick={()=>this.props.deleteUser(user)}> Delete</a>
                </td>
            </tr>
        );
    }
}

export default User;

Now when I pass delete user from UserList to User I get this error

app.bundle.js:29210 Uncaught TypeError: Cannot read property 'props' of undefined

I am not sure what am I doing wrong here mate? Would you know what's going ?

BTW I tried treating deleteUser as function by passing it as ()=>delete user, but I still get that error