Question: I am having issues with my boolean operator. I would like a div returned only if featured is true. My console log is showing false values, but true values are showing undefined.

```
{data.allContentfulProducts.nodes.map(product => {
        return (
          <Link
            to={`/shop/${pageContext.slug}/${product.slug}`}
            className={styles.featuredItem}
            key={product.id}
          >
            {console.log(product.featured)}

            {product.featured ? (
              <div className={styles.featuredSticker}>
                <p>Look I'm New!</p>
              </div>
            ) : null}

            <Img
              className={styles.featuredImage}
              alt={product.mainImage.title}
              fluid={product.mainImage.fluid}
              style={{
                position: 'relative',
                width: '100%',
                height: '100%',
              }}
              objectFit="cover"
            />
            <h3>{product.title}</h3>
          </Link>
        )
      })}

```

Any help would be greatly appreciated.

Answer: 
You can use && operator to return jsx expression only if it is true.

```
{product.featured && (
          <div className={styles.featuredSticker}>
            <p>Look I'm New!</p>
          </div>
        ) 

```
Deleting my cache solved this problem. Using Gatsby & Contentful.