React fun comp -CKEditor - 2 way Data Binding - Compare with Textarea and Editorpreview with unsafeHTML

 React fun comp -CKEditor - 2 way Data Binding - Compare with Textarea and Editorpreview with unsafeHTML

=========================================================================

import React, { useState } from 'react'; import PropTypes from 'prop-types';

import CKEditor from 'ckeditor4-react'; 

const TwoWayBinding = ()=> { 

const[data, setData] = useState('<p>React is really <em>nice</em>!</p>');

 function onEditorChange( evt ) 

 { 

 setData(evt.editor.getData()); 

 } 

 function handleChange( changeEvent ) 

 {

 setData(changeEvent.target.value); 

 }

 return (

<div>

  <CKEditor data="{data}" onChange="{onEditorChange}" />

  <label>

Change value:

<textarea defaultValue="{data}" onChange="{handleChange}" />

  </label>

  <EditorPreview data="{data}" />

</div>

); 

} 

function EditorPreview(props) 

{ 

return (

<div className="editor-preview">

  <h2>Rendered content</h2>

  <div dangerouslySetInnerHTML="{" { __html: props.data } }></div>

</div>

); 

} 

EditorPreview.defaultProps = { data: '' };

EditorPreview.propTypes = { data: PropTypes.string };

export default TwoWayBinding;