Why a value initialized in the onClick of a button result undefined?

Question

I am trying to build a searchbar for my project. I have this part of code which shows possible search results, and when you press on one of the names on the list it loads it on a variable and calls the searchUser function.

{filteredData.length != 0 && (
                <div className="dataResult">
                {filteredData.slice(0, 10).map((user, key) => {
                    return (
                        <p className="dataItem" onClick={() => setSelectedUser(user), searchUser}>
                            {user.Username}
                        </p>
                    );
                })}
                </div>
            )}

And the following is searchUser

function searchUser() {
        console.log(selectedUser);
        setUsername(selectedUser.Username);
        setWhomies(selectedUser.Whomies);
        setPoints(selectedUser.Points);
        setOpenPopup(true);
    };

How I can send the selected user to the function which have to show me all his data?

Answer 1

setSelectedUser will update the relevant state in the next render but you're trying to use it synchronously.

Two ways to fix this:

1. Run an effect when the state changes:

   useEffect(() => {
    setUsername(selectedUser.Username);
    setWhomies(selectedUser.Whomies);
    setPoints(selectedUser.Points);
    setOpenPopup(true);
   }, [selectedUser])
   
   <p className="dataItem" onClick={() => setSelectedUser(user)}>
   

2. Pass the new user as an argument to searchUser:

   function searchUser(user) {
    setUsername(user.Username);
    setWhomies(user.Whomies);
    setPoints(user.Points);
    setOpenPopup(true);
   };
   
   <p className="dataItem" onClick={() => {
     setSelectedUser(user)
     searchUser(user)
   }}>...