How to dynamically concat a string to a set variable in React?

Question

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.

Answer 1

In your handlechat function you already demonstrate how to modify the new_chat state value by calling set_new_chat. Why would it be any different when you want to append an emoji to it? Updating state is updating state, regardless of what text value you're updating it to.

Create a handler which appends the value to state:

function handleEmoji(emoji){
  set_new_chat(`${new_chat}${emoji}`);
}

And call that handler when clicking on the emoji:

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