Hi I’m trying to write a react component that displays a component by parsing a string to JSX. I was able to do so using react-jsx-parser but it does not work when I pass functions as bindings. The data is displayed properly but the functions don’t seem to be working. I’ve a snippet of what I’m doing right now. Is there a way to pass functions like handleSearchChange below and make it work? My end goal to build a sandbox where users can edit Jsx in a textarea and execute it in real time(including the functions if any). Thank you.
const handleSearchChange = (e) => {
console.log("Function Called: handleSearchChange", e.target.value);
// Additional function logic...
};
useEffect(() => {
fetch(/api/get-jsx/${user})
.then((res) => res.json())
.then((data) => {
setJsxTemplate(data.jsxTemplate);
setSandboxJsx(data.jsxTemplate);
setData(data);
})
.catch((error) => console.error("Failed to fetch shop details:", error));
}, [user]);
// Function to handle changes in the sandbox textarea
const handleJsxChange = (event) => {
setSandboxJsx(event.target.value);
};
const jsxTestString =
<input type="text" onChange="{handleSearchChange}" />
;
return (
<div>
{/* Textarea for editing JSX (simple sandbox) /}
<textarea
value={sandboxJsx}
onChange={handleJsxChange}
style={{ width: "100%", height: "200px" }}
/>
{/ Render the JSX using JsxParser */}
{sandboxJsx !== "" && (
<JsxParser
jsx={jsxTemplate}
components={{ Search }}
bindings={{
data,
handleSearchChange: handleSearchChange,
}}
onError={(error) => console.error("JsxParser error:", error)}
/>
)}
</div>
);
};