Javascript Conditional Operation with String from Javascript Object

Question

I'm trying to understand the code from this codesandbox. I've understood most of it, but I don't get this line:

return <div className={`menu-item ${selected ? "active" : ""}`}>{text}</div>;

selected is a string, and it's never empty, so the empty string truth doesn't apply. So how does this line of code work? Also is this javascript quirk or a react/jsx quirk?

Edit: General response:

It's not empty or null though because selected always assigned a value (the value of the name key). What's even weirder is that if you delete the selected prop from return <MenuItem text={name} key={name} selected = {selected}/>;, the active class will still be added, even though no information should be passed to MenuItem. Also, in MenuItem I've added a console.log for selected and it's not even what's passed in (a string), but rather a boolean appears. Why does that happen?

Disclaimer: I'm not that experienced in JS (evidently) and definitely not in React. What I just don't get is how passing in a not null/not empty string will cause a string to be empty? Perhaps I'm missing the part of the code where this.state.selected will lose its value while being passed?

Edit 2:

Y'all were all right. The component did the processing, but this processing wasn't documented, leading to confusion.

there are concepts called truthy (translates to true in bool comparison), falsy( translates to false in bool comparison) in javascripts. If the string is empty or null, it will evaluate to false meaning null or empty is a falsy — Dan Hunex, Jun 19 '19 at 00:15
It's not empty or null though because selected always assigned a value (the value of the name key). What's even weirder is that if you delete the selected prop from ```return ;```, the active class will still be added, even though no information should be passed to MenuItem. Also, in MenuItem I've added a console.log for selected and it's not even what's passed in (a string), but rather a boolean appears. Why does that happen? — user2793618, Jun 19 '19 at 00:18

score 5 · Accepted Answer · answered Jun 19 '19 at 00:14

5

if selected is true add class css active, if false does not add a class

answered Jun 19 '19 at 00:14

Umbro

1,984
12
40
99

It's not empty or null though because selected always assigned a value (the value of the name key). What's even weirder is that if you delete the selected prop from ```return ;```, the active class will still be added, even though no information should be passed to MenuItem. Also, in MenuItem I've added a console.log for selected and it's not even what's passed in (a string), but rather a boolean appears. Why does that happen? – user2793618 Jun 19 '19 at 00:21

score 1 · Answer 2 · answered Jun 19 '19 at 00:19

1

It means that if selected is truthy, then add the class active. If it's not, then don't add a class. So if selected is true, the rendered HTML output will be:

<div class="menu-item active">Text</div>

If it's false or falsy:

<div class="menu-item">Text</div>

answered Jun 19 '19 at 00:19

Jack Bashford

43,180
11
50
79

It's not empty or null though because selected always assigned a value (the value of the name key). What's even weirder is that if you delete the selected prop from ```return ;```, the active class will still be added, even though no information should be passed to MenuItem. Also, in MenuItem I've added a console.log for selected and it's not even what's passed in (a string), but rather a boolean appears. Why does that happen? – user2793618 Jun 19 '19 at 00:23

score 1 · Answer 3 · answered Jun 19 '19 at 00:20

1

this is a ternary statement that checks to see if selected is true, if that is the case it will be set to active if not it will be set to an empty string

answered Jun 19 '19 at 00:20

Brad Ball

599
3
5

score 0 · Answer 4 · answered Jun 19 '19 at 04:02

0

This is simply like this.

let className = "menu-item ";
if (selected) {
  className = className + "active"
}
console.log(className);

answered Jun 19 '19 at 04:02

Ken Labso

885
9
13

Javascript Conditional Operation with String from Javascript Object

4 Answers4