TinyMCE Rendering Incorrectly

Question

I have my TinyMCE working well in my React project. Up until I try to render more than one editor on the same page. When I do that, only one works as expected.

Here's my how I'm placing them...

render(){
        return(
            <Div>
                <select onChange={this.selectTheme}
                    value={this.state.client}>
                    <option default>Select Client...</option>
                    {this.state.clients.map(item => (
                        <option key={item.client}>{item.client}</option>
                    ))}
                </select>
                <h3 dangerouslySetInnerHTML={{ __html: this.state.client }}></h3>
                <img className="img-fluid" src={this.state.logo} alt="client logo" />
                <button onClick={this.appendPolicy}>Add Policy</button>
                <div id="policy-container">
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                </div>
            </Div>
        )
    }

If it helps, here is my editor code:

render() {
                return (
            <div>
                <div className="container">
                    <h1 style={{ background: this.props.color1, color: this.props.color2}} dangerouslySetInnerHTML={{__html: this.state.policy}}></h1>
                    <Editor
                        apiKey='yf9eajz93s3akrlb24b8ja9xcszddbxx22x4ug8c2q5boxw3'
                        className="mceEditor"
                        id='myTextArea'
                        init={{
                            height: 500,
                            editor_selector: 'mceEditor',
                            menubar: false,
                            browser_spellcheck: true,
                            contextmenu: true,
                            branding: false,
                            plugins: [
                                'advlist autolink lists link image charmap print preview anchor',
                                'searchreplace visualblocks code fullscreen',
                                'insertdatetime media table paste code help wordcount'
                            ],
                            toolbar:
                                'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
                        }}
                        onEditorChange={this.handleEditorChange}
                        value={this.state.content}
                    />
                    <button onClick={this.handleClick}>Save</button>
                    <button onClick={this.saveOverTemplate}>Save Over Template</button>
                    <button onClick={this.showAllPolicies}>Get All Policies</button>
                    
                    <select onChange={this.selectPolicy}
                            value={this.state.policy}>
                        <option default>Select Policy...</option>
                        { this.state.policies.map(item => (
                            <option key={item.policy}>{item.policy}</option>
                        ))}
                    </select>

                    {/* <div dangerouslySetInnerHTML={{__html: this.state.content}}></div> */}
                </div>
            </div>
        )
    }

The first one looks exactly as I'd expect, but the bottom two do not. I don't get any errors in the console, and I do see that all the data I'm requested is being retrieved as expected. It just loses it's formatting. Here's a photo of it below: Any ideas why the bottom 2 are different?

Answer 1

The problem is in Editor. You are using the same 'id':

id='myTextArea'

Remove it or use props. Something like:

id='{props.id}'