title: Display Contentful Banner if Boolean is True - Gatsby
body: <p>I have created a content model called &quot;Announcement Banner&quot;. I want to show the announcement if &quot;display&quot; is set to true. I have been able to query it and display the banner on the page by just querying <code>{announcmentBanner}</code>.. but now I am trying to have it only display if the boolean is true (or set to yes)</p>
  <p>I feel like I am on the right track. Here is what my content model looks like: <a href="https://i.stack.imgur.com/YG6AF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YG6AF.png" alt="contentful content" /></a></p>
  <p>Below is my code:</p>
  <pre><code>const Header = () =&gt; {
    const data = useStaticQuery(graphql`
      query {
        contentfulCarousel(title: { eq: &quot;homepage&quot; }) {
          Images {
            id
            gatsbyImageData
            description
          }
        }
        contentfulAnnouncementBanner {
          bannerMessage
          display
        }
      }
    `)
    const announcementBanner = data.contentfulAnnouncementBanner.bannerMessage
    return (
      &lt;&gt;
      
     {
     announcementBanner.display &amp;&amp; 
     &lt;div className=&quot;announcementBanner&quot;&gt;
     &lt;h2&gt;{announcementBanner.bannerMessage}&lt;/h2&gt;
     &lt;/div&gt;
    }
  </code></pre>
  <p>any help would be great! Thank you!</p>