CODEWITHSUNDEEP
javascriptreactjs
Baba
Baba

Reputation: 2219

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 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>
        )

Upvotes: 0

Views: 7987

Answers (5)

Shorn
Shorn

Reputation: 21446

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.

Upvotes: 3

ksav
ksav

Reputation: 20831

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.

Upvotes: 0

MwamiTovi
MwamiTovi

Reputation: 2502

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.

Upvotes: 0

Dheerendra Dev
Dheerendra Dev

Reputation: 64

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.

Upvotes: 0

cristos
cristos

Reputation: 21

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

Upvotes: 0

Related Questions