Function always returning true in Javascript ReactJS

Question

I have a function which checks if comments author is current or not.This function returns true or false.

I also have function which checks result of this function and the problem is result function always returns true.

Any suggestions please?

const checkCommentAuthor = (): boolean => {
  return comments.filter((item: any): boolean => {
    if (item.username === localStorage.getItem("username")) {
      return true;
    } else {
      return false;
    }
  });
};

const checkCommentAuthorResult = (): any => {
  let checkResult = checkCommentAuthor();
  if (checkResult) {
    return <IsCommentAuthor / > ;
  } else {
    return <IsNotCommentAuthor / > ;
  }
};

return checkCommentAuthorResult();
};

might be your item does not have username property so item.username is undefined and localStorage.getItem("username") is also undefined — kapil pandey
– kapil pandey, Commented Jul 10, 2020 at 8:41
You're using filter(), which means your comments array changes into a smaller array. So if you have five comments, and two are by the author, the function returns an array of two comments, not true or false. An array is truthy, so it always returns true. I'm also wondering how exactly this is supposed to work in general: shouldn't you check whether the user is the author for each comment individually? — user5734311
– user5734311, Commented Jul 10, 2020 at 8:41
@ChrisG could you tell me how to fix it or which method to use please ? — Nika Roffy
– Nika Roffy, Commented Jul 10, 2020 at 8:42

Stutje · Accepted Answer · 2020-07-10 08:51:40Z

3

The Array.filter() function docs returns a new array. So saying every check returns false u get an empty array, and an array (empty or not) translates always to true.

This would be better:

const checkCommentAuthor = (): boolean => {
  return comments.filter((item: any): boolean => {
    if (item.username === localStorage.getItem("username")) {
      return true;
    } else {
      return false;
    }
  }).length > 0; // check on length
};

EDIT: And a little refactoring

const checkCommentAuthor = (): boolean => 
  comments.filter((item: any): boolean => 
    item.username === localStorage.getItem("username")
  ).length > 0; // check on length

edited Jul 10, 2020 at 8:51

answered Jul 10, 2020 at 8:43

Stutje

8549 silver badges23 bronze badges

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

1 Comment

user5734311 Over a year ago

There's a function that already does this: .some

Greedo · Accepted Answer · 2020-07-10 08:49:06Z

2

your function can be simplified (many parts are useless/not needed). As the others said too, Array.filter() returns an array with all the element that match to true to the filter function body. In case of no match, [] is returned.

const checkCommentAuthor = (): boolean => {
  return comments.filter((item) => item.username === localStorage.getItem("username")).length > 0;
};

const checkCommentAuthorResult = (): any => {
  return checkCommentAuthor() ? <IsCommentAuthor / > : <IsNotCommentAuthor / > ;
};

checkCommentAuthorResult();

answered Jul 10, 2020 at 8:49

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Comments

Apostolos · Accepted Answer · 2020-07-10 08:51:04Z

2

You can simplify your filter function to the following:

const checkCommentAuthor = (): any => {
  return comments.filter((item: any): any => {
    item.username === localStorage.getItem("username")
  });
};

and then check if filtered array is empty

if (checkResult.length > 0) {

edited Jul 10, 2020 at 8:51

answered Jul 10, 2020 at 8:44

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

2 Comments

Greedo Over a year ago

the return type of checkCommentAuthor is still wrong

Apostolos Over a year ago

@Greedo correct, i forgot it is typescript. changed it to any

Nicky McCurdy · Accepted Answer · 2020-07-10 08:48:36Z

1

filter returns an array, which is always truthy, even if it's empty. You can simplify this a bit using some instead, which returns true if at least one item matches:

const checkCommentAuthor = (): boolean => {
  return comments.some((item: any): boolean => {
    if (item.username === localStorage.getItem("username")) {
      return true;
    } else {
      return false;
    }
  });
};

You also don't need this if/else or return type since this already has a boolean equality check:

const checkCommentAuthor = () => {
  return comments.some(
    (item: any) => item.username === localStorage.getItem("username")
  );
};

Finally, you can simplify the JSX with a ternary:

const checkCommentAuthorResult = () => {
  let Result = checkCommentAuthor() ? IsCommentAuthor : IsNotCommentAuthor;
  return <Result />;
};

answered Jul 10, 2020 at 8:48

Nicky McCurdy

19.8k5 gold badges63 silver badges91 bronze badges

3 Comments

Nika Roffy Over a year ago

Thank you very much for the help,Your answer is the closest to the result I want to get.Now I get the following problem.I guess its because of the some method.If one comment belongs to the user whole result is changing to the true.Is there any other method which would fix my problem?

Nicky McCurdy Over a year ago

I thought that's what you wanted. What's the issue and what results do you want specifically?

user5734311 Over a year ago

OP actually has a different problem; see my comments below their question.

Collectives™ on Stack Overflow

Function always returning true in Javascript ReactJS

4 Answers 4

1 Comment

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related