title: change state with error message when error
body: <p>if the user is exist, it will display all the message like in the attach screenshot.
  <a href="https://i.stack.imgur.com/nkg2e.png" rel="nofollow noreferrer">screenshot</a>
  else, id the user isn't exist I want it to show in the same display the message :&quot;user isn't exist&quot;. it go inside the catch, but then the web crash.</p>
  <pre><code>...
  export default function AllMessages(){
      const [messagesState, setMessagesState] = useState([]);
  
      const getAllMessages = async () =&gt;{
          let userId = document.querySelector(&quot;#userInput&quot;).value;
          try{
              const response = await axios.get(&quot;http://localhost:3001/messaging/get-all-messages/&quot; + userId)
              setMessagesState(response.data);
          }
          catch( e ) {
              let userNotFound = {
                  error: &quot;user not found&quot;
              }
              setMessagesState(userNotFound);
          }
      }
      ...
      return(
              ...
              &lt;div className=&quot;message-item all-messages&quot;&gt;
              {messagesState.error ? &lt;h1&gt; messagesState.error &lt;/h1&gt;: 
                  messagesState.map(message =&gt; (
                      &lt;ul class=&quot;list-group&quot;&gt;
                          &lt;Message handleDelete={() =&gt; handleDelete(message.id,message.receiver)} from = {message.sender} to = {message.receiver} subject = {message.subject} content = {message.message} date = {message.creationDate}/&gt;
                      &lt;/ul&gt;
                  ))
              }
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>