I was creating a text input space using input type area, using onChange utility.
That’s working fine.

But, now I created a emoji bar and want to add the specific emoji on click to the input space, indirectly trying to push/concat the emoji to the new_chat set variable.

Set variables:

const [chats, setchat] = useState([]);
const [new_chat, set_new_chat] = useState([]);

Chat handling functions:

function handlechat(event){
        set_new_chat(event.target.value);
    }

    function add_chat(){
        if(new_chat.trim()!=""){
            setchat(c => [...c, {text: new_chat, time: new Date()}]);
            set_new_chat("");
            // settime(t => [...t, new Date()]);
            console.log("new chat added");
        }
    }

Input text code:

<input type="text" id="input_text" value={new_chat} onChange={handlechat}></input>

Emoji sample block:

<div className="emoji_container" style={{fontSize: "1.5em"}} onClick={new_chat.concat('👍')}>👍</div>

Please help me!

I am facing difficulty in adding emojis from an emoji panel to an input box.