Cannot reference method with 'this' inside <StaticQuery /> with Gatsby

[broskees]

Seems I can reference this method everywhere but within the <StaticQuery /> component.

How can I reference the methods I try to mention in onMouseEnter and onMouseLeave ?

The error I'm getting is TypeError: Cannot read property 'collapseOpen' of undefined

import React, { Component } from "react"

import { StaticQuery, graphql } from "gatsby"

import * as bootstrap from 'bootstrap'

export default class Navigation extends Component {
  constructor(props) {
    super(props);
    this.collapseOpen = this.collapseOpen.bind(this)
    this.collapseClose = this.collapseClose.bind(this)
  }

  collapseOpen() {
    this.children[0].setAttribute('aria-expanded', 'true');
    this.children[0].classList.remove('collapsed');
    new bootstrap.Collapse(
      this.children[1],
      { toggle: true }
    );
  }

  collapseClose() {
    this.children[0].setAttribute('aria-expanded', 'false');
    this.children[0].classList.add('collapsed');
    new bootstrap.Collapse(
      this.children[1],
      { toggle: true }
    );
  }

  render () {
    var navData = {};
    return (
      <StaticQuery
        query={graphql`
          query NavQuery {
            allMarkdownRemark(
              sort: {fields: [frontmatter___tags, frontmatter___chapter], order: DESC}
            ) {
              edges {
                node {
                  id
                  frontmatter {
                    path
                    chapter
                    title
                    date
                    tags
                    chapter
                    chapter_path
                    chapter_type
                  }
                }
              }
            }
          }
        `}
        render={nav => (
          <>
            {nav.allMarkdownRemark.edges.map(function(post, index) {
              //throw new Error("my error message");
              if(post.node.frontmatter.chapter) {
                if(!navData[post.node.frontmatter.chapter]) {
                  navData[post.node.frontmatter.chapter] = {};
                  navData[post.node.frontmatter.chapter]['path'] = post.node.frontmatter.chapter_path;
                }
                if(!navData[post.node.frontmatter.chapter]['children']) {
                  navData[post.node.frontmatter.chapter]['children'] = {};
                }
                navData[post.node.frontmatter.chapter]['children'][post.node.frontmatter.title] = post.node.frontmatter.path;
              }else{
                navData[post.node.frontmatter.title] = {};
                navData[post.node.frontmatter.title]['path'] = post.node.frontmatter.path;
              }
            })}
            <aside class="bd-sidebar">
              <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
                <ul class="list-unstyled mb-0 py-3 pt-md-1">

                  {Object.keys(navData).map(function(key) {
                    if (navData[key]['children']!==undefined) {
                      return (
                        <li 
                          class="mb-1"
                          data-bs-target={'#'+key.replaceAll(' ', '-').toLowerCase()}
                          onMouseEnter={this.collapseOpen}
                          onMouseLeave={this.collapseClose}
                          aria-expanded="false"
                          data-bs-toggle="collapse">
                          <a
                            href={navData[key]['path']}
                            class="btn d-inline-flex align-items-center rounded collapsed text-start"
                            id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                            {key}
                          </a>
                          <div class="collapse" id={key.replaceAll(' ', '-').toLowerCase()}>
                            <ul class="list-unstyled fw-normal pb-1 small">
                              {Object.keys(navData[key]['children']).map(function(innerKey) {
                                return (
                                  <li><a href={navData[key][innerKey]} class="d-inline-flex align-items-center rounded">{innerKey}</a></li>
                                )
                              })}
                            </ul>
                          </div>
                        </li>
                      )
                    } else {
                      return (
                        <li class="mb-1">
                          <a
                            href={navData[key]['path']}
                            class="d-inline-flex align-items-center rounded text-start"
                            id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                            {key}
                          </a>
                        </li>
                      )
                    }   
                  })}
        
                </ul>
              </nav>
            </aside>
          </>
        )}
      />
    )
  }
}

I'm using Gatsby with Bootstrap 5.

UPDATE

I refactored the code functionally to try and solve the issue, and the events are firing correctly now, however it's behaving very strangely. (PS. I tried to create a boolean variable to stop the event handlers from running if another is running to try and solve the issue. No bueno.)

Here's a quick video showing the strange behavior.

Here's the updated code:

import React, { useEffect } from "react"

import { useStaticQuery, graphql } from "gatsby"

import * as bootstrap from 'bootstrap'

const Navigation = ({data}) => {
  const nav = useStaticQuery(graphql`
  query NavQuery {
    allMarkdownRemark(
      sort: {fields: [frontmatter___tags, frontmatter___chapter], order: DESC}
    ) {
      edges {
        node {
          id
          frontmatter {
            path
            chapter
            title
            date
            tags
            chapter
            chapter_path
            chapter_type
          }
        }
      }
    }
  }
  `)

  // Using Bootstrap 5's nav event handlers to attempt to solve the strange 'undefined'
  // issue by stopping collapse events from running cocurrently
  let isHandlerRunning = 0;

  useEffect(() => {

    document.getElementById('nav-collapse-parent').querySelectorAll('.collapse').forEach(navItem => {
      navItem.addEventListener('show.bs.collapse', function () {
        isHandlerRunning = 1;
        navItem.removeEventListener('mouseenter', hoverCollapseOver);
      })

      navItem.addEventListener('hidden.bs.collapse', function () {
        isHandlerRunning = 0;
        navItem.addEventListener('mouseenter', hoverCollapseOver);
      })
    })

  })

  //onMouseEnter & onMouseLeave events for navigation expansion
  const hoverCollapseOver = (event) => {
    if (isHandlerRunning != 1) {
      event.target.children[0].setAttribute('aria-expanded', 'true');
      event.target.children[0].classList.remove('collapsed');
      new bootstrap.Collapse(
        event.target.children[1],
        {
          toggle: true,
          parent: '#nav-collapse-parent'
        }
      );
      console.log(isHandlerRunning);
    } else {
      return;
    }
  }

  const hoverCollapseOut = (event) => {
    if (isHandlerRunning != 0) {
      //this is the original element the event handler was assigned to
      let e = event.toElement || event.relatedTarget;
      if (e.parentNode == this || e == this) {
        return;
      }

      event.target.children[0].setAttribute('aria-expanded', 'false');
      event.target.children[0].classList.add('collapsed');
      console.log(event.target)
      new bootstrap.Collapse(
        event.target.children[1],
        {
          toggle: true,
          parent: '#nav-collapse-parent'
        }
      );
    } else {
      return;
    }
  }

  // Looping and iteration traversing to reorganize nav items into a nested form
  const navData = {};

  nav.allMarkdownRemark.edges.map(function(post, index) {
    if(post.node.frontmatter.chapter) {
      if(!navData[post.node.frontmatter.chapter]) {
        navData[post.node.frontmatter.chapter] = {};
        navData[post.node.frontmatter.chapter]['path'] = post.node.frontmatter.chapter_path;
      }
      if(!navData[post.node.frontmatter.chapter]['children']) {
        navData[post.node.frontmatter.chapter]['children'] = {};
      }
      navData[post.node.frontmatter.chapter]['children'][post.node.frontmatter.title] = post.node.frontmatter.path;
    }else{
      navData[post.node.frontmatter.title] = {};
      navData[post.node.frontmatter.title]['path'] = post.node.frontmatter.path;
    }
  });  

  // the render
  return (
    <aside class="bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
        <ul class="list-unstyled mb-0 py-3 pt-md-1" id="nav-collapse-parent">

          {Object.keys(navData).map(function(key) {
            if (navData[key]['children']!==undefined) {
              return (
                <li 
                  class="mb-1"
                  aria-expanded="false"
                  onMouseEnter={(e) => hoverCollapseOver(e)}
                  onMouseLeave={(e) => hoverCollapseOut(e)}
                  data-bs-parent="#nav-collapse-parent"
                  data-bs-target={"#"+key.replaceAll(' ', '-').toLowerCase()}>
                  <a
                    href={navData[key]['path']}
                    class="btn d-inline-flex align-items-center rounded collapsed text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                  <div class="collapse" id={key.replaceAll(' ', '-').toLowerCase()} style={{margin: 1 + 'em'}}>
                    <ul class="list-unstyled fw-normal pb-1 small">
                      {Object.keys(navData[key]['children']).map(function(innerKey) {
                        return (
                          <li><a href={navData[key][innerKey]} class="d-inline-flex align-items-center rounded">{innerKey}</a></li>
                        )
                      })}
                    </ul>
                  </div>
                </li>
              )
            } else {
              return (
                <li class="mb-1">
                  <a
                    href={navData[key]['path']}
                    class="d-inline-flex align-items-center rounded text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                </li>
              )
            }   
          })}

        </ul>
      </nav>
    </aside>
  )
}

export default Navigation

UPDATE 2

I updated the code and was able to make the errors go away. Close but still no cigar - the problem is narrowed down to this: in the mouseLeave function, the bootstrap.Collapse toggle doesn't fire consistently.

Here's a video (you have to wait until the end before I'm able to recreate the problem of multiple collapse elements opening at once).

Here's the code:

import React from "react"

import { useStaticQuery, graphql } from "gatsby"

import * as bootstrap from 'bootstrap'

const Navigation = ({data}) => {
  const nav = useStaticQuery(graphql`
  query NavQuery {
    allMarkdownRemark(
      sort: {fields: [frontmatter___tags, frontmatter___chapter], order: DESC}
    ) {
      edges {
        node {
          id
          frontmatter {
            path
            chapter
            title
            date
            tags
            chapter
            chapter_path
            chapter_type
          }
        }
      }
    }
  }
  `)

  // finds siblings and returns them in an array
  const getSiblings = (elem) => {

    // Setup siblings array and get the first sibling
    const siblings = [];
    let sibling = elem.parentNode.firstChild;
  
    // Loop through each sibling and push to the array
    while (sibling) {
      if (sibling.nodeType === 1 && sibling !== elem) {
        siblings.push(sibling);
      }
      sibling = sibling.nextSibling
    }
  
    return siblings;
  
  };

  //onMouseEnter & onMouseLeave events for navigation expansion
  const hoverCollapse = (event, triggerType) => {
    const mouseLeave = (elem) => {
      if (!elem.children[1].classList.contains("show") && !elem.children[1].classList.contains("collapsing")) return; // break if doesn't have visible children
  
      elem.children[0].setAttribute('aria-expanded', 'false');
      elem.children[0].classList.add('collapsed');
  
      new bootstrap.Collapse(
        elem.children[1],
        {
          toggle: true,
          show: false,
          hide: true
        }
      )
      console.log(elem);
      console.log("^ should be collapsed")
      
    }
  
    const mouseEnter = (elem) => {
      if (elem.children[1].classList.contains("show") || elem.children[1].classList.contains("collapsing")) return; // break if doesn't have hidden children
  
      elem.children[0].setAttribute('aria-expanded', 'true');
      elem.children[0].classList.remove('collapsed');
  
      new bootstrap.Collapse(
        elem.children[1],
        {
          toggle: true,
          show: true,
          hide: false
          //parent: '#nav-collapse-parent'
        }
      );
    }

    const collapseSiblings = (elem) => {
      getSiblings(elem).forEach(sibling => {
        if (!sibling.classList.contains("collapse-trigger")) return; // break if isn't a collapse element
        mouseLeave(sibling)
      })
    }
    
    if (!event.target.classList.contains("collapse-trigger")) return; // break if isn't a collapse element

    if(triggerType == "onMouseLeave"){
      mouseLeave(event.target)
      collapseSiblings(event.target)
    } else if (triggerType = "onMouseEnter") {
      mouseEnter(event.target)
      collapseSiblings(event.target)
    }
  }

  // Looping and iteration traversing to reorganize nav items into a nested form
  const navData = {};

  nav.allMarkdownRemark.edges.map((post, index) => {
    if(post.node.frontmatter.chapter) {
      if(!navData[post.node.frontmatter.chapter]) {
        navData[post.node.frontmatter.chapter] = {};
        navData[post.node.frontmatter.chapter]['path'] = post.node.frontmatter.chapter_path;
      }
      if(!navData[post.node.frontmatter.chapter]['children']) {
        navData[post.node.frontmatter.chapter]['children'] = {};
      }
      navData[post.node.frontmatter.chapter]['children'][post.node.frontmatter.title] = post.node.frontmatter.path;
    }else{
      navData[post.node.frontmatter.title] = {};
      navData[post.node.frontmatter.title]['path'] = post.node.frontmatter.path;
    }
  });  

  // the render
  return (
    <aside class="bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
        <ul class="list-unstyled mb-0 py-3 pt-md-1" id="nav-collapse-parent">

          {Object.keys(navData).map((key) => {
            if (navData[key]['children']!==undefined) {
              return (
                <li 
                  class="collapse-trigger"
                  style={{marginBottom: 5 + 'px', paddingBottom: 5 + 'px'}}
                  onMouseEnter={(e) => hoverCollapse(e, 'onMouseEnter')}
                  onMouseLeave={(e) => hoverCollapse(e, 'onMouseLeave')}
                  data-bs-parent="#nav-collapse-parent"
                  data-bs-target={"#"+key.replaceAll(' ', '-').toLowerCase()}>
                  <a
                    aria-expanded="false"
                    href={navData[key]['path']}
                    class="btn d-inline-flex align-items-center rounded collapsed text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                  <div class="collapse collapse-target" id={key.replaceAll(' ', '-').toLowerCase()} style={{margin: 5 + 'px'}}>
                    <ul class="list-unstyled fw-normal pb-1 small" style={{marginBottom: 5 + 'px'}}>
                      {Object.keys(navData[key]['children']).map((innerKey) => {
                        return (
                          <li><a href={navData[key][innerKey]} class="d-inline-flex align-items-center rounded">{innerKey}</a></li>
                        )
                      })}
                    </ul>
                  </div>
                </li>
              )
            } else {
              return (
                <li class="mb-1">
                  <a
                    href={navData[key]['path']}
                    class="d-inline-flex align-items-center rounded text-start"
                    id={key.replaceAll(' ', '-').toLowerCase()+'-source'}>
                    {key}
                  </a>
                </li>
              )
            }   
          })}

        </ul>
      </nav>
    </aside>
  )
}

export default Navigation