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.
