Dollar sign and quotes in return component

Question

i create a use state in my react component like that:

const [loading, setLoading] = React.useState(false);

and in one project in return of component i saw something like this

<ListItemButton sx={{ color: `${loading && 'yellow'}` }}>

I can't find how that `${x && 'x' }` syntax works Can someone explain to me or show me the documentation of this?

Answer 1

In this case `${loading && 'yellow'}` is the same as loading && 'yellow'

Strings surrounded in backticks ` are called template literals. It allows you tu put variables in strings.

`I'm ${name}. I'm ${age} years old.`

---

&& operators just means 'take the first falsey element and return it. If no falsey element is found, returns the last one.

0 && "" && "Banana" will return 0

"Banana" && "" && 0 will return ""

"Banana" && 1 && 2 will return 2