Html Question posted in
Some basic documentation can be found here.

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

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you could do it like this:

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

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

    function add_chat() {
      if (new_chat.trim() != '') {
        setchat([...chats, { text: new_chat, time: new Date() }]);
        set_new_chat('');
        // settime(t => [...t, new Date()]);
        console.log('new chat added');
      }
    }
    return (
      <div>
        <h1>Hello World</h1>
        <input
          type="text"
          id="input_text"
          value={new_chat}
          onChange={handlechat}
        ></input>
        <div
          className="emoji_container"
          style={{ fontSize: '1.5em', cursor: 'pointer' }}
          onClick={() => set_new_chat(new_chat.concat('👍'))}
        >
          👍
        </div>
        <button onClick={add_chat}>send</button>
        // those lines are to verify if it does work, you might delete after
        <p>your chat: {chats.map((c) => c.text)}</p>
        <p>your new phrase: {new_chat}</p>
      </div>
    );
  };

  export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search