How to get initial and setState value of contentEditable Input in ReactJS?

Question

I am trying to build a comment box using contentEditable div and have the following issues:

1. Not able to get the initial value of the text property.
2. Not getting the setState value from contentEditable.
3. Having issues with emoji's which are working fine when using the input element but does not work with contentEditable.

With the code provided below, I am getting undefined when console.log, not sure what I am missing.

Expected Outcome.

1. get the typed value from contentEditable including the emoji's.

// Content Input Model

import React, { Fragment } from 'react'
import '../../assets/css/comment.css'

const ContentInput = ({valueChange,contentInputId,ref,onClick,onPhClick,placeholder,  ...props }) => {
    return (
        <Fragment>
      <div
          spellCheck="false"
          role="textbox"
          id={contentInputId}
          ref={ref}
          contentEditable="true"
          onChange={valueChange}
          aria-multiline="true"
          data-placeholder={placeholder}
          {...props}
      />
            <div className="comment_submit_button" onClick={onClick}>
                <span className='submit_arrow_light'>  </span>
            </div>
        </Fragment>
    )
};
export default ContentInput

// Comment Modal///

import React , {Component} from 'react';
import EmojiPicker from 'emoji-picker-react'
import '../../../../assets/css/comment.css'
import JSEMOJI from 'emoji-js'
import ContentInput from "../../../../UIElements/Inputs/ContentInput";
//emoji set up
let jsemoji = new JSEMOJI();
// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';

class CommentModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text : ' ' ,
            emojiShown : false ,
        };
        this.desChange = this.desChange.bind(this);
    }
    desChange = (e) => {
        // let text = this.state.text;
        this.setState({text : e.target.value});

    };
    comment = (e) => {
        e.preventDefault();
        let {text} = this.state;
        let {back , incrementComments , ...rest} = this.props;
        const updatedText = this.setState({text : e.target.value});
        console.log(updatedText);
    };
    //displays emoji inside the input window
    handleEmojiClick = (n , e) => {
        let emoji = jsemoji.replace_colons(`:${e.name}:`);

        this.setState({
            text : e.target.value + emoji ,
            emojiShown : !this.state.emojiShown
        });
        console.log(this.emojiShown)
    };

    toggleEmojiState = () => {
        this.setState({
            emojiShown : !this.state.emojiShown
        });
    };

    render() {
        return (
            <div className='comment_model_container display_none'>
                <div className="comment_content_container global_bt">
                    <div className="comment_text_area_container ">
                        <ContentInput
                            valueChange={this.desChange}
                            contentInputId='comment_box'
                            onClick={this.comment}
                            spellcheck="true"
                            className='comment_text_area global_bt'
                            placeholder='Leave a comment...'
                        />
                    </div>
                    <div>
                    </div>
                    <div className='emoji_container'>
                        <span id="show-emoji-yes" onClick={!this.toggleEmojiState}><span
                            className='grey_smiley_icon'> </span></span>
                        <div className="emoji-table">
                            <EmojiPicker onEmojiClick={this.handleEmojiClick} className='emoji_popup'/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default CommentModal;
```

Answer 1

Use onInput on ContentInput instead of onChange

And use e.target.innerHTML on desChange instead of e.target.value

contentEditable event should be 'onInput' Content Editable change events