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.
2
Answers
In your
handlechat
function you already demonstrate how to modify thenew_chat
state value by callingset_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:
And call that handler when clicking on the emoji:
you could do it like this: