title: How to show success or error message based on the response of the api in React js
body: <p>I have successfully executed the post Axios call using hooks in React js. But I am not sure how to show the success message or error message catching from the api response and show it below the form. The message should be exactly what is written in the API response.</p>
  <p>My Messageform:</p>
  <pre><code>const MessageForm = () =&gt; {
    const url = &quot;https://example.herokuapp.com/api/messages&quot;
    const [data, setData] = useState({
      first_name: &quot;&quot;,
      last_name: &quot;&quot;,
      email:&quot;&quot;,
      phone:&quot;&quot;,
      msz:&quot;&quot;
  
    })
    function submit(e){
      e.preventDefault();
      axios.post(url,{
        first_name: data.first_name,
        last_name:data.last_name,
        email:data.email,
        phone:data.phone,
        msz:data.msz
      })
      .then(res=&gt;{
        console.log(res.data)
      })
      setData({
          first_name: &quot;&quot;,
          last_name: &quot;&quot;,
          email:&quot;&quot;,
          phone:&quot;&quot;,
          msz:&quot;&quot;
      
        });
    }
  
    function handle(e){
        const newdata = {...data}
        newdata[e.target.id] = e.target.value
        setData(newdata)
        console.log(newdata)
        
        // setData(&quot;&quot;);
    }
  
    return (
      &lt;div className=&quot;message-form&quot;&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;title&quot;&gt;
            &lt;span&gt;Contact Now&lt;/span&gt;
            &lt;div className=&quot;main-title&quot;&gt;Send us a message&lt;/div&gt;
          &lt;/div&gt;
          {/* form start */}
          &lt;form action=&quot;&quot; className=&quot;apply&quot; onSubmit={(e)=&gt; submit(e)}&gt;
            &lt;div className=&quot;row row-1&quot;&gt;
              {/* Name here */}
              &lt;div className=&quot;input-field name&quot;&gt;
                &lt;label htmlFor=&quot;Name&quot;&gt;First Name&lt;/label&gt;
                &lt;input onChange ={(e) =&gt; handle(e)} value = {data.first_name}
                  required 
                  type=&quot;text&quot;
                  placeholder=&quot;Your First Name&quot;
                  name=&quot;Name&quot;
                  id=&quot;first_name&quot;
                /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;input-field name&quot;&gt;
                &lt;label htmlFor=&quot;Name&quot;&gt;Last Name&lt;/label&gt;
                &lt;input onChange ={(e) =&gt; handle(e)} value = {data.last_name}
                  required
                  type=&quot;text&quot;
                  placeholder=&quot;Your Last Name&quot;
                  name=&quot;Name&quot;
                  id=&quot;last_name&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;row row-2&quot;&gt;
              {/* phone here */}
              &lt;div className=&quot;input-field phone&quot;&gt;
                &lt;label htmlFor=&quot;Phone&quot;&gt;Phone&lt;/label&gt;
                &lt;input onChange ={(e) =&gt; handle(e)} value = {data.phone}
                  required
                  type=&quot;text&quot;
                  placeholder=&quot;Your Phone Here&quot;
                  name=&quot;Phone&quot;
                  id=&quot;phone&quot;
                /&gt;
              &lt;/div&gt;
  
              {/* Email here */}
              &lt;div className=&quot;input-field email&quot;&gt;
                &lt;label htmlFor=&quot;Email&quot;&gt;Email Address&lt;/label&gt;
                &lt;input onChange ={(e) =&gt; handle(e)} value = {data.email}
                  required 
                  type=&quot;text&quot;
                  placeholder=&quot;Your Email Address&quot;
                  name=&quot;Email&quot;
                  id=&quot;email&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            {/* date select */}
            &lt;div className=&quot;row row-3&quot;&gt;
              {/* Message here */}
              &lt;div className=&quot;input-field message&quot;&gt;
                &lt;label htmlFor=&quot;Message&quot;&gt;Message&lt;/label&gt;
                &lt;textarea onChange ={(e) =&gt; handle(e)} value = {data.msz}
                  required
                  placeholder=&quot;Enter Message Here&quot;
                  name=&quot;Message&quot;
                  id=&quot;msz&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            {/* submit button */}
            &lt;ExploreButton hoverText=&quot;Submit&quot; hover=&quot;hoverTrue&quot;&gt;
              Send Now
            &lt;/ExploreButton&gt;
          &lt;/form&gt;
          {/* Form end */}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default MessageForm;
  </code></pre>
  <p>This is the response that I get from the api</p>
  <p><a href="https://i.stack.imgur.com/8h3XV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8h3XV.jpg" alt="enter image description here" /></a></p>
  <p><strong>Here I want to catch the string written in message and render it in the UI. I am new to react and I am not sure how to do that.</strong></p>