Estoy trabajando en una aplicación de mensajería. Tengo un estado de uso que se llama 'mensajes' y muestra los mensajes de un determinado chat en la pantalla. Por ahora, cada vez que un usuario envía un mensaje, se agrega a los mensajes useState pero quiero que solo se agregue a los mensajes <div> . ¿Cómo puedo agregar un mensaje a los mensajes existentes sin cambiar el estado de uso?

Mi código de chat principal se parece a esto:

 import React, { useState } from 'react'; export default function Main() { const [messages, setMessages] = useState([]); const [message, setMessage] = useState(''); // Message Managment function chatInputPressed(e) { if ((e.key === 'Enter' || e.keyCode === 13) && message !== '') { // Check if the user pressed the Enter key setMessages(oldMsgs => ([message, ...oldMsgs])); // Insert the new message to the messages useState setMessage(''); // Set the message to empty } } return ( <div className='Main'> <div className='messages'> {messages.map(m => ( <div key='random-key' className='message' >{m}</div> ))} </div> <input type="text" id="message-input" value={ message } onChange={ (e) => setMessage(e.target.value) } onKeyDown={ chatInputPressed } > </input> </div> ); }

Quiero agregar un nuevo elemento de mensaje <div> a <div className='messages'> en lugar de actualizar los mensajes como este setMessages(oldMsgs => ([message, ...oldMsgs])); .