Using emojione-picker with react-onclickoutside

[Olena377]

Hello everybody, I need some help. How can I wrap emojione-picker class into react-onclickoutside in order to use them together?

import React from 'react';
import ReactDOM from 'react-dom';
import OnClickOutside from 'react-onclickoutside';
import FileInput from 'react-file-input';
import EmojiPicker from 'emojione-picker';

class Conversation extends React.Component {
    constructor() {
        super();
        this.state = {
            text: '',
            isOpened: false
        }
    }
    showEmoji() {
        this.setState({
            isOpened: !this.state.isOpened
        });
    };
    render(){
        return (
            <div className="conversation">
                <div className="conversation__footer">
                    <div className="conversation__wrapper">
                        <a className={this.state.isOpened ? "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile" : "fa fa-smile-o fa-2x conversation__icon conversation__icon--smile conversation__icon--opened"}
                                    aria-hidden="true"
                                    onClick={this.showEmoji.bind(this)}/>
                        <EmojiPicker className={this.state.isOpened ? " " : "display-none"} onChange={function(data){
                          console.log("Emoji chosen", data);
                        }} />
                    </div>
                </div>
            </div>

        )
    }
};

export default Conversation;

[tommoor]

It looks like you would want to use the optional second parameter of react-onclickoutside to a function that would set state.isOpened to false. See the second example under the Installation heading of the readme here: https://github.com/Pomax/react-onclickoutside#installation