I am trying to make a rich text editor using React.js and I am using iframe with the designMode property set to 'ON'. I want to make the selected text bold on click of a button. I want to use the execCommand() function but I keep getting this error: TypeError: Cannot read property 'contentWindow' of undefined. I am a beginner in React and I'm unable to figure out how to tackle this problem.

I've attached my code for your reference.

import React, { Component } from 'react'

import 'font-awesome/css/font-awesome.css'





export default class Editor extends Component {



    constructor(){

        super()

        this.execComd = this.execComd.bind(this)

    }



    componentDidMount(){

       let editor = this.textField.contentWindow.document

       editor.designMode = 'on'

    }



    execComd(command){

        this.textField.contentWindow.execCommand(command, false, null)   

    }



    render() {

        return (

            <> 

                <div>

                    <button onClick={this.execComd('bold')}><i className="fa fa-bold"></i></button>

                </div>

                <iframe 

                    ref={textField => this.textField = textField} 

                    id="textField" 

                    name="textField" 

                    style={{width: "1000px",height: "500px"}} 

                    frameborder="1">

                </iframe>

            </>

        )

    }

}