CODEWITHSUNDEEP
javascriptreactjs
berk
berk

Reputation: 99

find method doesn't work properly in React

I just want my code to send specified username strings to Profile page within username props retrieved through find() method and put the result to a function called user as you can also clearly figure in the code below, but the thing is, find method doesn't really return only one case in my if-else statement in user function, for example, when I put 3, which matches the first condition because of id number 3 already is in my dummy data, it must send the username to profile page matching the related username in my data list, however, it works in both conditions regardless of what I put in there, why doesn't it only one condition?

function App() {
  const data = [
    { id: 1, username: "jane", password: "1234" },
    { id: 2, username: "jack", password: "1234" },
    { id: 3, username: "john", password: "1234" },
    { id: 4, username: "elizabeth", password: "1234" },
  ];
  const navigate = useNavigate();

  const user = (id) => {
    data.find((item) => {
      if (item.id === id) {
        console.log(item.username);
        return item.username;
      } 
      else
      { console.log("user not found")}
    }
    );
  };

  setTimeout(() => {
    user(3);  // 3 is the id of the user and it will return the username after 3 seconds
    return;
  }, 3000);
  return (
    <div>
      <h1>Navbar</h1>
      <Link to="/">Home</Link>
      <Link to="login">Login</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="login" element={<Login />} />
        <Route path="users" element={<Profile />}>
          <Route path=":id" element={<Profile username={user} />} />
          <Route path="*" element={<h1>404 not found</h1>} />
        </Route>
        <Route path="*" element={<h1>404 not found</h1>} />
      </Routes>
    </div>
  );
}

export default App;

I really don't get this, I'm all stuck trying to fix this for hours and any help will be super appreciated, thanks a lot...

Upvotes: 0

Views: 1023

Answers (2)

Mushroomator
Mushroomator

Reputation: 9168

find() expects the callback to return true or false (to be precise a truthy or falsy value) and will return the first item which callback returns a truthy value or undefined if no callback returns a truthy value. You cannot decide what find() returns as it seems you want to.

You should use find() to get the user of interest and then use user.username to get the username.

const data = [
    { id: 1, username: "jane", password: "1234" },
    { id: 2, username: "jack", password: "1234" },
    { id: 3, username: "john", password: "1234" },
    { id: 4, username: "elizabeth", password: "1234" },
  ];

const getUserById = (id) => data.find(user => user.id === id);
const userId = 3;
const user = getUserById(userId);
if(user !== undefined){
  console.log(`User with id ${userId} found.`)
  console.log(user);
  console.log(user.username);
} else console.log(`No user with id ${userId} found.`)

Upvotes: 1

Ashok Thapa
Ashok Thapa

Reputation: 163

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned. Simply try, let result = data.find(item => item.id === id)

Upvotes: 0

Related Questions