Javascript compailer in react, error handler not working

So here's my code

import React, { Component } from 'react';


class JavascriptTasks extends Component {
    state = {
        enteredText: null,
        bool: false
    }


    onClickHandler() {
        this.setState({ bool: true });
    }

    onChangeHandler = (event) => {
        this.setState({ enteredText: event.target.value })
    }


    render() {

        let toBeCompiled = null;
        if (this.state.bool) {
            try {
                var el = document.createElement('script');
                el.innerText = this.state.enteredText;
                document.getElementById('iframe').appendChild(el);
            }
            catch (e) { 
                console.log(e
                    ) }
        }

        return (
            <div>
                <textarea id="jscontent" onChange={this.onChangeHandler}></textarea>
                <iframe id="iframe"></iframe>
                <button onClick={() => this.onClickHandler()}>Click me</button>
                {toBeCompiled}
            </div>
        );
    }
}

export default JavascriptTasks;

Basically what i'm trying to do is make an online javascript compailer that users could use, js methods & code work but what if an user tries to compile a plain text? The whole site crashes because error handler is not working..