0

I was trying to implement a Hook function in ReactJs with useEffect and useRef to render a math expression. When I returned the constants from the Hook function and imported the function into another component, it just worked with square brackets instead of parenthesis or braces. Why is that?

This is the function:

import { useRef, useEffect } from "react";

const katex = require('katex')

const useElementDiv = () => {
    const elementRef1 = useRef();
    const elementRef2 = useRef();
    useEffect(() => {
        const divElement = elementRef1.current;
        katex.render("G \\left( \\frac{x_A + x_B + x_C}{3} , \\frac{x_A + x_B + x_C}{3} \\right)", divElement, {
            throwOnError: false,
            displayMode: true
        });
        }, [])
    useEffect(() => {
        const divElement = elementRef2.current;
        katex.render("G \\left( x_G,y_G \\right)", divElement, {
            throwOnError: false,
            displayMode: true
        });
        }, [])
    return [ elementRef1, elementRef2 ]   
}

export default useElementDiv;

and this is how I called it:

import React from "react";
import useElementDiv from "./equations";

const MyComponent = () => {
    const [ element1, element2 ] = useElementDiv();
    return (
        <div ref={element2}></div>
    )
}
Ricardow3
  • 1
  • 2
  • You are returning tuple from your custom hook that's why you need to use bracket where the custom hook is used – user1672994 Jul 23 '22 at 17:19
  • `[value1, value2]` indicates an array literal, from which you can destructure items when you have a reference to the array elsewhere. You can also use curly brackets for an object instead, and you can then destructure with curly brackets using the same approach. Just don't mix and match them. – CertainPerformance Jul 23 '22 at 17:19
  • the problem is that when i use curly brackets instead it just doesn't work. The entire application doesn't run... I don't think the questions linked above have answered the same thing. – Ricardow3 Jul 23 '22 at 17:50

0 Answers0