I am trying to work on a project where we allow the user to create HTML elements and attach the appropriate event listener code to it (https://codesandbox.io/s/interactive-objects-tjvvhv?file=/src/App.js)
In the following code, I want to read the formData which takes in three fields, 1)element-type, 2)event-listener-type, and 3)JS code that will go into the event listener. I know that I can use createElement and attach to the DOM, but I am not sure on how to add the event listener code from the form that DOM element.
import "./styles.css";
export default function App() {
function handleFormSubmit(e) {
e.preventDefault();
console.log(e);
//create the a new element with the event listener code and append it div#display
}
return (
<div className="App">
<form onSubmit={handleFormSubmit}>
<label for="element-type">element-type</label>
<input type="text" name="element-type" />
<br />
<label for="event-listener">event-listener</label>
<input type="text" name="event-listener" />
<br />
<label for="code">code</label>
<textarea name="code" rows="7" cols="50" />
<br />
<input type="submit" />
</form>
<div id="display"></div>
</div>
);
}
Any ideas in this direction are appreciated. Thanks a lot.
3
Answers
I found that eval() executes the code immediately so,I solved the above problem through "new Function" as follows:
credits : @Konrad
Here’s a version that uses
iframe
safely:Since you are using React (If I am not wrong)
I would suggest making use the hooks in React to get your job done, I did not spend time much on the problem but ideally. First suggestion since you are doing something of this sort that has some complexity is to use TypeScript or get the code type checked to get rid of those edge cases.
Some things I would keep in mind to get this problem started with :
Use TypeScript
listener
Make use of React Hooks
useRef and useState hooks to accept
Use JavaScript
eval()
method to convert string to JavaScript codeUse React in built methods to manipulate the ReactDOM rather than using the native JavaScript methods since they are mutable unlike React, The output can be unpredictable in the React environment.
I hope that provides some idea to actually put together a logic based on TypeScript and React to generate the output you desire.