React With Same String Comparison Using === Always Evaluates False

Question

I have a component which uses some state passed down from a parent. The component will render if the user is logged in and a string matches. If so display otherwise dont. I've printed = in to console to ensured the strings had no spaces.

Though the conditional statement is correct "NOT OWNER" still shows when it should be "OWNER".

Here is the component simplified:

import React from "react";

const EditButton= ({
  isUserLoggedIn,
  username,
  sellersUsername,
}) => {
  return (
    <>
      {isUserLoggedIn&& username === sellersUsername? (
        <>OWNER</>
      ) : (
        <>NOT OWNER</>
      )}

      {console.log(`=${isUserLoggedIn}=`)}
      {console.log(`=${username}=`)}
      {console.log(`=${sellersUsername}=`)}
      {console.log(username=== sellersUsername)}
      {console.log(
        username.localeCompare(sellersUsername, "en", {
          sensitivity: "base",
        })
      )}
      {console.log(isUserLoggedIn&&username===sellersUsername)}
    </>
  );
};

export default GalleryEditButton;

The output:

// should evaluate to true but does not
=true=
=RandomTestUsername=
=RandomTestUsername=
false
0
false

Any ideas?

What if you remove the isUserLoggedIn && part, and do {console.log( username === sellersUsername )}? Also try username.localeCompare( sellersUsername , 'en', { sensitivity: 'base' } ) — Dai
– Dai, Commented Oct 1, 2022 at 1:46
Hi! Thanks for the additional test cases. I've updated the post based on your suggestion with the results. It looks like no differences between the usernames but they evaluate to false still. Any other suggestions I can check? — Potion
– Potion, Commented Oct 1, 2022 at 1:52
Your localeCompare returns 0 when the strings are considered equal. — Dai
– Dai, Commented Oct 1, 2022 at 1:52
"Any other suggestions" - ...you have used your step-through debugger by now, right? — Dai
– Dai, Commented Oct 1, 2022 at 1:53
Yes I have. I am using the chrome extension DevTools to monitor state and props of react components. I also used VSCode to attach a debugger and step into the code. I feel like it is something simple I overlooked — Potion
– Potion, Commented Oct 1, 2022 at 2:54

Marveeen · Accepted Answer · 2022-10-01 02:49:27Z

1

My suggestion is to check the typeOf the two variables. Because === is a strict checking that is case sensitive and also types sensitive.

answered Oct 1, 2022 at 2:49

Marveeen

1207 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Potion Over a year ago

Thanks for the suggestion. I think this was part of the issue. I was using a 3rd party library which returns username as an object and while sellerUsername was String. But now they are both strings it looks like it could be spme state issue.

Potion Over a year ago

Thanks. This was it. After giving it another look, I had to convert the object to string then lowertcase. The libraries I used differed in usernames sometimes. String(username).toLocaleLowerCase(); Thanks for the help!

Rafhael · Accepted Answer · 2022-10-01 02:00:39Z

0

Code example

I tried running a similar scenario on my machine and the results were the ones you'd expect.

My suggestion is try tracking the state update of "username" and "sellersUsername," maybe one of them is not being updated.

The problem is most likely at one of these 2 props since username === sellersUsername is what's returning false.

answered Oct 1, 2022 at 2:00

Rafhael

173 bronze badges

1 Comment

Potion Over a year ago

You are right it could be state. I've monitored it closely and the state appears to propagate correctly. Thanks for your suggestion

Collectives™ on Stack Overflow

React With Same String Comparison Using === Always Evaluates False

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related