Understanding the use of && in a react component

Question

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 component that uses post.

        const renderPosts = () => {
            if (loading) return <p>Loading posts...</p>
            if (hasErrors) return <p>Unable to display posts.</p>

            return posts.map(post => <Post key={post.id} post={post} excerpt />)
        }

I don't understand what (excerpt &&) is doing together with the Link below. Can you explain this to me? Also passing excerpt from the map helper above, what does that imply? It has no value.

        export const Post = ({ post, excerpt }) => (
          <article className={excerpt ? 'post-excerpt' : 'post'}>
            <h2>{post.title}</h2>
            <p>{excerpt ? post.body.substring(0, 100) : post.body}</p>

            {excerpt && (
              <Link to={`/posts/${post.id}`} className="button">
                View Post
              </Link>
            )}
          </article>
        )

Try not to ask multiple questions in a single question. SO is designed for "one question, one answer" - you can only mark one answer as "correct". There's nothing wrong with posting multiple fine-grained questions to SO, you can even cross reference the questions if you want to avoid having to post all the details multiple times. Posting single questions helps you get your answers quicker, helps others more easily answer the parts of your question that they understand and keeps answers easier to read. — Shorn, Apr 12 '20 at 03:43

Shorn · Accepted Answer · 2021-12-22T22:47:41.453

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 ...> 
  else return 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.

score 0 · Answer 2 · answered Apr 12 '20 at 02:18

0

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

answered Apr 12 '20 at 02:18

cristos

11
2

So does it imply that if excerpt was not passed as part of the Post prop the link will not show right? – Baba Apr 12 '20 at 02:24
@user2320476 Yes. And passing only the property name is the same as `excerpt={true}`. – xehpuk Apr 12 '20 at 02:25
yes it implies if excerpt is undefined or null the Link won't show – cristos Apr 12 '20 at 02:25

score 0 · Answer 3 · answered Apr 12 '20 at 02:26

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.

score 0 · Answer 4 · answered Apr 12 '20 at 02:32

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 JavaScript
true && 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.

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

Have a read of Logical_Operators.

Operator: Logical AND (&&)
Syntax: expr1 && expr2
Description: 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.

function Mailbox(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(
  <Mailbox unreadMessages={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.

Understanding the use of && in a react component

5 Answers5

Linked