How to show success or error message based on the response of the api in React js

Your API is returning a response stream, you need to use the response .json() method to read it to completion. But before you do that, you should store the response status code, as it becomes inaccessible after you parse the response JSON.

axios.post(url,{
    first_name: data.first_name,
    last_name:data.last_name,
    email:data.email,
    phone:data.phone,
    msz:data.msz
}).then(response => {

    let statusCode = response.status,
        success = response.ok;

    response.json().then(response => {

        if(!success){
            //handle errors here
            console.log(response.message)
            return;
        }

        // handle successful requests here
        console.log(response.message)

    })
}).catch((error) => {
    // catch any unexpected errors
    console.log(error);
})

Some general advice. you should try to separate your Axios requests into an independent function and make it reusable, or you will run into issues in the future if you decide to handle your API responses differently in the future.

I cleaned it up a bit, so its easier to understand. The short answer is use an additional "useState" hook to store the messages. Then have a logical operator (in the return section above row-1) to check if messages exists & display them.

Warning: None of this code was tested.

const INITIAL = {
  first_name: "",
  last_name: "",
  email: "",
  phone: "",
  msz: ""
}

const MessageForm = () => {
  const url = "https://example.herokuapp.com/api/messages"
  const [data, setData] = useState(INITIAL);
  const [message, setMessage] = useState(null);

  function handleSubmit(e) {
    e.preventDefault();

    setMessage(null);

    axios.post(url, data)
      .then(res => {
        setData(res.data);
        setMessage(res.message);
      })
      .catch(err => {
        setMessage(err.message);
      })
  }

  function handleChange(e) {
    const { id, value } = e.target; //destructuring 
    setData({...data, [id]:value})
  }

  return (
    <div className="message-form">
      <div className="container">
        <div className="title">
          <span>Contact Now</span>
          <div className="main-title">Send us a message</div>
        </div>
        {/* form start */}
        <form className="apply" onSubmit={handleSubmit}>

          {message && <div>{message}</div>}
          
          <div className="row row-1">
            {/* Name here */}
            <div className="input-field name">
              <label htmlFor="Name">First Name</label>
              <input onChange={handleChange}
                value={data.first_name}
                required
                type="text"
                placeholder="Your First Name"
                name="Name"
                id="first_name"
              />
            </div>
            <div className="input-field name">
              <label htmlFor="Name">Last Name</label>
              <input onChange={handleChange}
                value={data.last_name}
                required
                type="text"
                placeholder="Your Last Name"
                name="Name"
                id="last_name"
              />
            </div>
          </div>

          <div className="row row-2">
            {/* phone here */}
            <div className="input-field phone">
              <label htmlFor="Phone">Phone</label>
              <input onChange={handleChange}
                value={data.phone}
                required
                type="text"
                placeholder="Your Phone Here"
                name="Phone"
                id="phone"
              />
            </div>

            {/* Email here */}
            <div className="input-field email">
              <label htmlFor="Email">Email Address</label>
              <input onChange={handleChange}
                value={data.email}
                required
                type="text"
                placeholder="Your Email Address"
                name="Email"
                id="email"
              />
            </div>
          </div>

          {/* date select */}
          <div className="row row-3">
            {/* Message here */}
            <div className="input-field message">
              <label htmlFor="Message">Message</label>
              <textarea onChange={handleChange} value={data.msz}
                required
                placeholder="Enter Message Here"
                name="Message"
                id="msz"
              />
            </div>
          </div>

          {/* submit button */}
          <ExploreButton hoverText="Submit" hover="hoverTrue">
            Send Now
          </ExploreButton>
        </form>
        {/* Form end */}
      </div>
    </div>
  );
};

export default MessageForm;