title: State is getting input from user but not displaying on webpage in React.js
body: <p>Actually i'm building a Facebook Mesenger Clone in React.js and I used material UI. When we run the code it asks for username. after providing that we can send message in the app. But as soon as we send the message we only get username printed on the screen <a href="https://i.stack.imgur.com/gn5fB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gn5fB.png" alt="as can be seen in screenshot" /></a>.
  The message is not being displayed on the webpage. This is App.js code:</p>
  <pre><code>
      import React, {useEffect, useState} from 'react';
  import {Button, FormControl, Input, InputLabel} from &quot;@material-ui/core&quot;;
  import Message from &quot;./Message&quot;;
  import './App.css';
  
  function App() {
  
      const [input, setInput] = useState('');
      const [messages, setMessages] = useState([]);
      const [username, setUsername] = useState('');
  
      useEffect(() =&gt; {
          setUsername(prompt('Please enter your name'));
      }, [])
  
      const sendMessage = (event) =&gt; {
          event.preventDefault();
          setMessages([...messages, {username: username, text: input}]);
          setInput('');
      }
  
      return &lt;div className=&quot;App&quot;&gt;
  
          &lt;h1&gt;Hey Mate! &lt;/h1&gt;
          &lt;h2&gt;Welcome {username}&lt;/h2&gt;
          &lt;form&gt;
              &lt;FormControl&gt;
                  &lt;InputLabel&gt;Enter a message...&lt;/InputLabel&gt;
                  &lt;Input value={input} onChange={event =&gt; setInput(event.target.value)}/&gt;
                  &lt;Button disabled={!input} variant=&quot;contained&quot; color=&quot;primary&quot; type='submit' onClick={sendMessage}&gt;Send
                      Message&lt;/Button&gt;
              &lt;/FormControl&gt;
          &lt;/form&gt;
  
  
          {
              messages.map(message =&gt; &lt;Message username={username} message={message}/&gt;)
          }
  
      &lt;/div&gt;
  }
  
  export default App;
  </code></pre>
  <p>and this is message component's code:</p>
  <pre><code>      import React from &quot;react&quot;;
  import {Card, CardContent, Typography} from &quot;@material-ui/core&quot;;
  import './Mesage.css';
  
  function Message(message, username) {
  
      const isUser = username === message.username;
  
      return (
          &lt;div className={`message ${isUser &amp;&amp; 'message_user'}`}&gt;
              &lt;Card className={isUser ? &quot;message_userCard&quot; : &quot;message_guestCard&quot;}&gt;
                  &lt;CardContent&gt;
                      &lt;Typography color=&quot;white&quot; variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
                          {message.username}: {message.text}
                      &lt;/Typography&gt;
                  &lt;/CardContent&gt;
              &lt;/Card&gt;
          &lt;/div&gt;
  
      )
  }
  
  export default Message;
  </code></pre>
  <p>Kindly help me</p>