I have a comment box in my React App and I built it with Draft.js as follows. I enter some text and format them with bold and italic buttons. Then I click Comment button. After clicking the Comment button, sendUserComment function will be fired and update the state 'newComment'. AXIOS will send them to the database and return the comment so I can show the comment in the 'newCommentShow' div.
The problem is, if I type a comment as a text and apply bold, the data will be sent to the database as
<p><b>Some texts</b></p>
and the returning data is processing as the same way. So I'm seeing the whole <p><b>Some texts</b></p> as a string in the 'newCommentShow' div. How can I process tags in that string and show the correct formatted text?
const { Toolbar } = toolbarPlugin;
const plugins = [toolbarPlugin];
const text = '';
class ProjectModal extends Component {
constructor(props) {
super(props);
this.state = {
newComment: '',
editorState: createEditorStateWithText(text)
};
this.editorOnChange = this.editorOnChange.bind(this);
}
editorOnChange(editorState) {
this.setState({ editorState });
}
sendUserComment = () => {
const com = stateToHTML(this.state.editorState.getCurrentContent())
API.post('add_comment', com)
.then(({ data }) => {
console.log(data);
this.setState({ newComment: data.comment })
})
.catch((err) => {
console.log("AXIOS ERROR: ", err);
})
}
render() {
return(
<div className="newCommentBox">
<div className="newCommentMain">
<Toolbar>
{
(externalProps) => (
<div className="toolbarModal">
<BoldButton {...externalProps} />
<ItalicButton {...externalProps} />
</div>
)
}
</Toolbar>
<Editor
editorState={this.state.editorState}
onChange={this.editorOnChange}
plugins={plugins}
ref={(element) => { this.editor = element; }}
className="editor"
/>
</div>
<button className="commentBtn" onClick={() => this.sendUserComment}>Comment</button>
<div className="newCommentShow">{this.state.newComment}</div>
</div>
)
}
}
