dangerouslySetInnerHTML inside textarea - Emoji markup

Question

I'm trying to render emoji's inside a textarea, i've got stumped at this point.

https://jsfiddle.net/nvt7qjar/

i can't see how to use dangerouslySetInnerHTML inside a textarea on it's value, so as you add emojis you see them rendered in the preview?

Thanks in advance.

Emoji Markup library used

<script src="//cdn.jsdelivr.net/emojione/1.5.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.5.0/assets/css/emojione.min.css" />

Code:

var Emoji = React.createClass({
  rawMarkup: function() {
    var rawMarkup = emojione.shortnameToImage(this.props.emojcode.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  handleClick: function(id) {
    this.props.handleClick(id);
  },


  render: function() {
    return (
      <div id="emojText">
        <button onClick={this.handleClick.bind(this, this.props.emojcode)}><span dangerouslySetInnerHTML={this.rawMarkup()} /></button>
      </div>
    );
  }
});

var App = React.createClass({

  getInitialState: function() {
    return {
      data: [':grinning:', ':joy:', ':smiley:', ':laughing:' ],
      text: ''
    };
  },

  _onChange: function(event, value) {
    this.setState({
      text: event.target.value
    });
  },

  handleClick(item) {
    this.setState({
      text: this.state.text +=item
    });
  },

  rawMarkup: function() {
    var rawMarkup = emojione.shortnameToImage(this.state.text.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },



  render: function() {
    var _this = this;
    var data = this.state.data.map(function(item){
      return (
        <Emoji emojcode={item} handleClick={_this.handleClick}/>
      );
    });

    return (
      <div className="container">
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
        {data}
        <div className="clearfix"></div>
        <textarea
          className="message-composer"
          name="message"
          value={this.state.text}
          onChange={this._onChange.bind(this)}
          />
      </div>
    );
  }
});

ReactDOM.render(
  <App name="World" />,
  document.getElementById('container')
);

Answer 1

you have to use content editable div eg

<div contenteditable='true'><div>