title: React change element style rendered with useState
body: <p>I am working on a messaging app. I have a useState which is called 'messages' and it renders the messages from a certain chat on the screen. For now, every time a user sends a message, it is added to the messages useState but I want it to just be appended to the messages <code>&lt;div&gt;</code>.
  How can I append a message to the existing messages without changing the useState?</p>
  <p>My main chat code looks somethings like this:</p>
  <pre><code>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) &amp;&amp; message !== '') { // Check if the user pressed the Enter key
              setMessages(oldMsgs =&gt; ([message, ...oldMsgs])); // Insert the new message to the messages useState
              setMessage(''); // Set the message to empty
              
          }
      }
  
      return (
          &lt;div className='Main'&gt;
              &lt;div className='messages'&gt;
                  {messages.map(m =&gt; (
                      &lt;div key='random-key' className='message' &gt;{m}&lt;/div&gt;
                  ))}
              &lt;/div&gt;
              &lt;input 
                  type=&quot;text&quot; 
                  id=&quot;message-input&quot; 
                  value={ message } 
                  onChange={ (e) =&gt; setMessage(e.target.value) } 
                  onKeyDown={ chatInputPressed } 
              &gt;
              &lt;/input&gt;
          &lt;/div&gt;
  
      );
  }
  </code></pre>
  <p>I want to append a new message <code>&lt;div&gt;</code> element to <code>&lt;div className='messages'&gt;</code> instead of updating the messages like this <code>setMessages(oldMsgs =&gt; ([message, ...oldMsgs]));</code>.</p>