how do I initialize two Draftjs editor on same page?

Question

I try to create two editor left and right but something went wrong when I initialize it the both editor malfunction, One typing in first editor it automatically goes into second or vice versa.

Editor image

I included all the libraries and when try to run with single editor it works fine but with second editor it create some issues.

Below is code:

import React from "react"
import { EditorState, RichUtils, AtomicBlockUtils , convertToRaw, convertFromRaw } from "draft-js"
import Editor from "draft-js-plugins-editor"

const inEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",       
}

const outEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",

}    

class PageContainer extends React.Component{        

    //Write constructor for intializing EditorSate
    constructor(props){
        super(props)
        this.state={
        editorState1:EditorState.createEmpty(),
        editorState2:EditorState.createEmpty(),
        }
    }

    onChange = editorState1 => {
        this.setState({ 
            editorState1 
        });
    };

    onChange = editorState2 => {
        this.setState({
            editorState2
        });
    };

    render(){
        return (
            <div className="editors">
                <div className="row">

                        <div style={inEditorStyle} className=" col-md-5 ">
                            <Editor 
                                className="inEditor"
                                editorState={this.state.editorState1}
                                onChange={this.onChange}
                                ref="editor1"
                            />
                        </div>
                        <div className="col-md-2 " align="center" style={{marginTop:"8%"}} >
                            <input type="button" className="btnhover btn btn-secondary pointer" id="btnFetch" value="Roman"
                            style={{width:"200px",backgroundColor:"#F5F5F5",color:"black",border:"none"}} 
                            />

                        </div>
                        <div style={outEditorStyle}  className=" col-md-5 ">
                            <Editor 
                                className="outEditor"
                                editorState={this.state.editorState2}
                                onChange={this.onChange}
                                ref="editor2"
                            />
                        </div>                           
                </div>
            </div>
        );
    }    
}    
export default PageContainer;

Did I miss something, Please help me if I do in wrong way.

Answer 1

Here is your working Example Onchange handle method was same in both editor.