Jqx Form getComponentByName() undefined error

[shadymaster1011Participant]

Hi I am using React js version 22.0.0 to use JQX forms , and whenever I try to use getComponentByName() function i am getting undefined as a output . This is my code:

import React, { useRef, useEffect } from “react”;
import { JQXForm } from “jqwidgets-react/react_jqxform”;

const MyForm = () => {
const myFormRef = useRef(null);

useEffect(() => {
// Call getComponentByName after the form has been rendered
if (myFormRef.current) {
const submitButton = myFormRef.current.getComponentByName(“submitButton”);
if (submitButton) {
console.log(“Submit Button Component:”, submitButton);
} else {
console.error(“Submit Button not found!”);
}
}
}, []);

const template = [
{
type: “text”,
name: “name”,
label: “Name:”,
labelPosition: “left”,
},
{
type: “button”,
name: “submitButton”,
text: “Submit”,
},
];

return <JQXForm ref={myFormRef} template={template} />;
};

export default MyForm;

[adminKeymaster]

React’s ref should be attached properly, but sometimes JQXForm might not expose getComponentByName directly. Try using myFormRef.current.getInstance() to access the actual instance:

useEffect(() => {
    if (myFormRef.current) {
        const formInstance = myFormRef.current.getInstance();
        const submitButton = formInstance.getComponentByName("submitButton");

        if (submitButton) {
            console.log("Submit Button Component:", submitButton);
        } else {
            console.error("Submit Button not found!");
        }
    }
}, []);

Regards,
Peter

[Author]

Posts