Understanding The Use Of && In A React Component

I am trying to understand this functional component in react. I know Post accepts two parameters post and excerpt. 2 tenary operators were used Here is the render code from a compo

Solution 1:

You posted this question with reactjs as the only tag, indicating you think this is a react thing, but fundamentally your question is about a javascript thing: "Short circuit conditionals".

From the code you posted:

excerpt && <Link...>

is expressing

if excerpt 
  then return <Link ...> 
  elsereturn undefined

So if excerpt evaluates "falsy", nothing will be displayed (because React ignores undefined or null), but if excerpt is "truthy" then the link will be displayed.

---

EDIT:

I just noticed you had a second question in there:

Also passing excerpt from the map helper above, what does that imply? It has no value.

Omitting the value of an attribute causes JSX to treat it as true. See this SO answer elsewhere.

So that bit of code is expressing that it wants the Post component to always add the Link.

Note your second question is actually very react-specific, given that React goes out of its way to define these "empty" attributes as "truthy", when the default behaviour of HTML treats them as "falsy" - see this SO answer for more details.

Solution 2:

if excerpt is true (truthy) the Link will be displayed. The && operator executes once the condition is met.

Solution 3:

At Post component (below one) && operator will be true if both conditions are true that means excerpt should exist then only Link will work. Second, passing the excerpt through the map will give the value for different post and excerpt has value you have passed it as an argument in Post component.

Solution 4:

I don't understand what (excerpt &&) is doing together with the Link below. Can you explain this to me?

It is called Conditional Rendering in react, a very powerful concept. It enables you to render components depending on the state of your application.

// In JavaScripttrue && expression === expression 

false && expression === false.

// Within your code// if excerpt === true
{excerpt && (<Link>...</Link>)} === (<Link>...</Link>) // Component is rendered// if excerpt === false
{excerpt && (<Link>...</Link>)} === false// Component isn't be rendered

Based on the above, you should now understand why excerpt is passed to every Post, excerpt must be a boolean in this implementation.

Solution 5:

Have a read of Logical_Operators.

Operator: Logical AND (&&) Syntax:expr1 && expr2Description: If expr1 can be converted to true, returns expr2; else, returns expr1.

And then take a look at the Inline If with Logical && Operator section on the react docs conditional-rendering page.

functionMailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div><h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <MailboxunreadMessages={messages} />,
  document.getElementById('root')
);

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.