0

Question: I'm following the Mendix Custom Widget Learning Path, but I've encountered issues with the content. Specifically, the tutorial tries to import `CharacterCounterContainerProps` but then declares `content` from `CharacterCounterPreviewProps`. I've fixed this issue in my code, but now I'm unable to display the character count in my widget's UI.   import { ReactElement, createElement, useRef, useEffect, useState } from "react"; import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps"; import "./ui/CharacterCounter.css"; export function CharacterCounter({ content }: CharacterCounterPreviewProps): ReactElement { const [currentInput, setCurrentInput] = useState<string>(""); const myContainerRef = useRef<HTMLDivElement>(null); const onInputChange = (e: Event): void => { if (e) { setCurrentInput((e.target as HTMLInputElement).value); } }; useEffect(() => { let eventListener: Element; if (myContainerRef.current) { const inputElements = myContainerRef.current.querySelectorAll("input"); if (inputElements.length) { eventListener = inputElements[0]; eventListener.addEventListener("input", onInputChange); } } return () => { eventListener.removeEventListener("input", onInputChange); }; }, [myContainerRef]); return ( <div className="character_counter"> <div ref={myContainerRef}>{content}</div> <span> {currentInput.length} / {200} </span> </div> ); }  

asked 2024-12-20

0 answers