Fix build errors

Author: maxphillipsdev

components/MultiChoiceAnswer.tsx

@@ -41,7 +41,7 @@ const Answer = ({
   const [isExpanded, setIsExpanded] = useState(false)
   const childrenArray = Children.toArray(children) as ReactElement[]
   const answer = childrenArray.filter(
-    (child) => child.type != MultiChoice.Explanation
+    (child) => child.type !== MultiChoice.Explanation
   )
   const explanation = childrenArray.find(
     (child) => child.type === MultiChoice.Explanation

components/MultiChoiceExplanation.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import React, { Children, ReactElement, ReactNode, useState } from 'react'
 import { callbackify } from 'util'
 import { styled } from '../stitches.config'
@@ -24,32 +25,35 @@ const Explanation = ({ content, children }: ExplanationProps) => {
     )
   }
 
-  console.log("children", children)
-    const traverse = (ele: JSX.Element[] | JSX.Element | string, callback: (ele: string) => void) => {
+  console.log('children', children)
+  const traverse = (
+    ele: JSX.Element[] | JSX.Element | string,
+    callback: (ele: string) => void
+  ) => {
     if (typeof ele === 'string') {
       // console.log("ele is string:", ele)
-      callback(ele);
-      return;
+      callback(ele)
+      return
     }
     if (Array.isArray(ele)) {
       // console.log("ele is array:", ele)
-      ele.forEach((subEle) => traverse(subEle, callback));
+      ele.forEach((subEle) => traverse(subEle, callback))
     } else if (React.isValidElement(ele)) {
       // console.log("ele is react element:", ele)
-      if (ele.props.hasOwnProperty('children')) {
+      if (ele.props.includes('children')) {
         // Only if the props of this react element has a children prop.
         // Might not in some cases, e.g. when ele.type === "img"
-        traverse((ele as JSX.Element).props.children, callback);
+        traverse((ele as JSX.Element).props.children, callback)
       }
     }
   }
 
   // Traverse the component tree to count total length of text.
-  let textLength = 0;
+  let textLength = 0
   traverse(children, (text) => {
     textLength += text.length
   })
-  
+
   const handleOnClick = (event) => {
     // prevents collapsing the parent component
     event.stopPropagation()
@@ -60,17 +64,18 @@ const Explanation = ({ content, children }: ExplanationProps) => {
   const threshold = 1000
   if ((children.length > 1 || textLength > threshold) && !isExpanded) {
     let previewTextFound = false
-    let previewText = ""
+    let previewText = ''
 
-    // Traverse the component tree and find the first text node.    
+    // Traverse the component tree and find the first text node.
     traverse(children, (text: string) => {
       if (!previewTextFound) {
         previewText = text
         previewTextFound = true
       }
     })
 
-    previewText.substring(0, threshold)
+    previewText
+      .substring(0, threshold)
       // trims all non-letter characters from end of string
       // this ensures the truncated paragraph looks good with the ellipsis (...)
       .replace(/[^a-z]+$/gi, '')

contentlayer.config.js

@@ -72,7 +72,7 @@ export default makeSource({
       rehypeHighlight,
       rehypePrismPlus,
       rehypeAutolinkHeadings,
-      rehypeSlug,
+      rehypeSlug
     ]
   }
 })