Intro

Having a Table Of Contents is great for longer articles, but if you include it in your template and you create a short post without a TOC, now you have a blank hole in your template. Here is how you can show or hide the Table of Contents depending on whether it exists or not! The principal is the same as we covered in this article Ncoughlin: React Conditional Styling except we are going to use the class toggle to change the display property of the element.

Template Query

The first step is that we need to include the table of contents into the template query.

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      tableOfContents(absolute: false)
      excerpt(pruneLength: 160)
      html
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        categories
        tags
        featuredImage {
          id
          childImageSharp {
            sizes {
              src
            }
          }
        }
      }
    }
  }
`

TOC Checker Function

Then inside of our component we extract our TOC from props and set our TOC to a constant. Then we create a checker function that let's us know whether there is anything in the Table Of Contents at all!

const BlogPostTemplate = ({ data }) => {

  const toc = data.markdownRemark.tableOfContents


  // check for TOC and if blank insert noToc class into template
  // noToc class is set to display none
  const checkTOC = () => {
    if (toc.length === 0) {
      return "noToc"
    } else {
      return
    }
  }
  const tocDisplay = checkTOC()

Conditional Class

and then the result of our checkTOC function gets placed into our JSX. If there is no Table Of Content the class noToc will be added to the wrapping div.

<div className={`toc ${tocDisplay}`}>
    <div className="toc-wrapper">
        <h3>Contents</h3>
        <section
        dangerouslySetInnerHTML={{ __html: post.tableOfContents }}
        />
    </div>
</div>

Display None for Conditional Class

You can probably guess what is happening next. Heading over to our stylesheet for the TOC we simply set display to none for the noToc class.

.noToc {
  display: none;
}

Examples

And just to show you that this is working here are some sample.

Post with NO TOC

Post with TOC

Automated Amazon Reports

Automatically download Amazon Seller and Advertising reports to a private database. View beautiful, on demand, exportable performance reports.

bidbear.io