I know that it's called logical and but i mean specifically this way of using it,
I was looking at some jsx packages and found this example

```js
const Button = props => (
  <button className={'large' in props && 'large'}>
    {props.children}
    <style jsx>{`button{
      .large {padding: 50px;}
    `}</style>
  </button>
)
```

What does 'large' in props && 'large' mean? I know large is just a class so its irrelevant but can someone put into words what the operator is actually doing?
Is it a short form of some kind of if statement and if so how would you type it out if it wasnt shortened? i hope this makes sense!!

edit: here's another example

```
 <p>{params.categoryName === "rent" ? "rent" : "sale"}</p>
      {loading ? (
        <h1>Loading</h1>
      ) : listings && listings.length > 0 ? (
        <>
          <ul>
            {listings.map((listing) => (
              <ListingItem listing={listing.data} id={listing.id} />
            ))}
          </ul>
        </>
      ) : (
        <p>No listings for {params.categoryName}</p>
      )}

```