Automatically triggered a function in a onClick while mounting the component

Question

In react js, if someone used list object mapping to a list as follow:

const removeUser = (email)=>{
        alert(email)
    }

    const usersList = users.map((user) =>
        <li key={user._id}>
            {user.Name}
            { isAdmin && <FontAwesomeIcon icon={faTrashAlt}  onClick={removeuser(user.Email)}/>}
        </li>
    );

in here, the function inside onClick event is automatically triggered when mounting the list elements component. it will prompt alerts with email addresses automatically.

This: https://reactjs.org/docs/handling-events.html – Randy Casburn Feb 01 '21 at 16:59 — Randy Casburn, Feb 01 '21 at 16:59

score 2 · Accepted Answer · answered Feb 01 '21 at 16:58

In react - onClick should get a function to execute, not execute a function like you did.

Wrap your function with arrow key function like this and it will work:

const removeUser = (email) => {
    alert(email)
}

const usersList = users.map((user) =>
    <li key={user._id}>
        {user.Name}
        {isAdmin && <FontAwesomeIcon icon={faTrashAlt}  onClick={() => removeuser(user.Email)}/>}
    </li>
);

score 1 · Answer 2 · edited Feb 01 '21 at 17:10

1

You are passing the invocation of the method, you should pass a definition of a method instead.

const usersList = users.map((user) => (
     <li key={user._id}>
        { user.Name }
       { isAdmin && <FontAwesomeIcon icon={faTrashAlt} onClick={() => removeuser(user.Email)} /> }
      </li>
 ));

edited Feb 01 '21 at 17:10

Naren

4,152
3
17
28

answered Feb 01 '21 at 16:59

Sonia Aguilar

171
5

'{}` in the wrong place. please correct. – Randy Casburn Feb 01 '21 at 17:00
sorry @RandyCasburn , I submited by mistake :-> – Sonia Aguilar Feb 01 '21 at 17:01
This is what happens, when try to wrap everything in one line – Naren Feb 01 '21 at 17:05
what is still incorrect? @RandyCasburn – Sonia Aguilar Feb 01 '21 at 17:06
that's what happen trying to help from the phone.... – Sonia Aguilar Feb 01 '21 at 17:08
Fixed it @RandyCasburn – Naren Feb 01 '21 at 17:11
It's Ok @SoniaAguilar, No worries, you're doing good!! – Naren Feb 01 '21 at 17:13
thank you @Naren ... I'm not going to answer by my phone any more – Sonia Aguilar Feb 01 '21 at 17:16
"_answer by my phone_" - I learned that lesson too :-) – Randy Casburn Feb 01 '21 at 17:18
Same here, haha... – Naren Feb 01 '21 at 17:19

Automatically triggered a function in a onClick while mounting the component

2 Answers2