How to add new <p> tag every time user sends new message in ractJs?

Every time I hit Enter It updates in the same tag
First I sent Hello World!
The second time I tried to send Hello as a new message It was updated with the same tag

I have only provided chunks of code which is being used for this send msg functionality

This the code I am also using speech to text which is why I have used setTranscriptValue to set speech value inside textarea

handleKeyDown function is called onKeyUp in textarea

const [sendMsg, setSendMsg] = useState(<p></p>);

const handleKeyDown = (event) => {
        if (event.key == 'Enter') {

const handleSendKey = (event) => {
        setSendMsg(<p> {transcriptValue} </p>);

<span id="send-btn" className='material-symbols-outlined' onClick={handleSendKey}> send </span>

<ul className="chatbot__box" id="ul-chatbot-box">
                    <li className="chatbot__chat incoming" id="li-incoming-msg">
                        <span className="material-symbols-outlined">
                        <p>Hi there, How can I help you today?</p>
                        style={{ display: 'none' }}
                    <li className="chatbot__chat outgoing"> {sendMsg} </li>

>Solution :

If you want to grow a list of messages, you should maintain an array instead of a single element.

It’s also not recommended to store JSX elements in state. Store data only and leave the rendering to the component.

const [sendMsg, setSendMsg] = useState([]); // init with an empty array

const handleSendKey = (event) => {
  setSendMsg((msgs) => [...msgs, transcriptValue]); // add to the array

Then in your render / return value, map over the values

{, i) => (
  <li className="chatbot__chat outgoing" key={i}>

Leave a Reply