Javascript expression not understood

Question

I´m new to React and Js and I would like to understand this line of code (It is Js inside of the JSX):

<h5 className="recipes__title">
  {item.recipe.label < 20 ? `${item.recipe.label}` : `${item.recipe.label.substring(0, 25)}...` }
</h5>

Anyone knows how to read and understand it?

Thank you!

[What does this symbol mean in JavaScript?](https://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript) — Andreas, Mar 09 '20 at 11:16

Expired Data · Accepted Answer · 2020-03-09T11:45:53.033

<h5 className="recipes__title">            //An html header
                                           //Containing... 
  {
    item.recipe.label < 20 ?               // If the item.recipe.label is less than 20 then...

`${item.recipe.label}`                     // the label
: `${item.recipe.label.substring(0, 25)}   //else the first 25 characters of the label followed by 
  ...`                                     // the string "..."     
}
</h5>

You can find out about the ternary operator (which is an expression conditionally resolving to one of two expressions) here

You can find out about template literals (which are strings which can contain javascript to resolve) here

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

JSX part:

<element>
{ // You can put your Javascript here but mostly inline script. }
</element

`${...}`

This is a string template introduced in ES6. Its used to build string. ${} means you want to process JS, variable name or function called.

substring(0, 25)

This is a part that is checking if the label is of max 25 characters. If not, its picking first 25 characters and then adding ellipsis(...) after it.

Javascript expression not understood

2 Answers2

Reference