Unable to show success or error message in Next JS-CodePudding

I am working in Next JS, and I am trying to use an API via Axios, the API is working fine but is unable to display any message (success or failure) on the web page. In my console, it's showing success but not displayed on the web.

Here is my code:

const subscribeMe = async (event) => {
            const emails = email;
            event.preventDefault();
            const res = await fetch('https://myurl.com/admin-panel/Api/subscribe?email=' emails);
            const { error, message } = await res.json();
            if (error) {
                    console.log('error);
                    setError(error);
            } else {
                    console.log('two');
                    setSuccess(message);
            }
};

To display the Success or Error message I am using the following code (after submitting the button of the newsletter form). Where am I going wrong?

{success 
? 
<span className="flex items-center text-sm font-bold text-green-700"> 
{success}
</span> 
: 
<span className="flex items-center text-sm font-bold text-red-800">
{error} 
</span>

Here is my whole component code:

import React, { useEffect, useState } from "react";

const Subscribe = () => {
 const [email, setEmail] = useState('');
 const [error, setError] = useState('');
 const [success, setSuccess] = useState('');

const subscribeMe = async (event) => {
            
            console.log('data is ' email);  
            const emails = email;
            console.log('emails id is ' emails);    
            
            event.preventDefault();
            
            const res = await fetch('https://myurl.com/admin-panel/Api/subscribe?email=' emails);
            //const success ="Om Success";


            const { error, message } = await res.json();
            if (error) {
                    console.log(error);
                    setError(error);
            } else {
                    console.log(message);
                    setSuccess(message);
            }
};
    const changeEmail = (event) => {
        const email = event.target.value;
        setEmail(email);
    }
   return (
    
                <div className="container">
                <div className="row">
                <div className="col-md-7 col-sm-12 col-lg-7 ft-img">
                  <img src="img/xchanger.png" />
                </div>
                <div className="col-md-5 col-sm-12 col-lg-5 ft-form">
                  <form className="row g-3" onSubmit={subscribeMe}>
                    <div className="col-12">
             

            <input type="subscribe" className="form-control" id="subscribe2" name="email" type="email" placeholder="Please Subscribe" onChange={changeEmail}
              />

              <button type="submit" className="btn btn-primary mb-3">subscribe</button>
              </div>

                    {success 
                       ? 
                    <span className="flex items-center text-sm font-bold text-green-700"> 
                        
                         {success}
                    </span> 
                       : 
                    <span className="flex items-center text-sm font-bold text-red-800">
                    
                          {error} 
                    </span>
                }

          </form>
        </div>
      </div>
    </div>
     
   )
}
export default Subscribe

CodePudding user response：

I don't think this is related to next.js...

I think you should add a try/catch block within subscribeMe and debug it by adding a debugger to better understand what's going on

const subscribeMe = async (event) => {
  try{ 
    debugger;

    // ---- your `subscribeMe` code ---- 

    console.log('data is ' email);  
    const emails = email;
    console.log('emails id is ' emails);    
    
    event.preventDefault();
    
    const res = await fetch('https://myurl.com/admin-panel/Api/subscribe?email=' emails);

    const { error, message } = await res.json();
    if (error) {
      console.log(error);
      setError(error);
    } else {
      console.log(message);
      setSuccess(message);
    }
    // ---- your `subscribeMe` code ---- 
    
  } catch(error) {
    debugger;
    console.error(error);
  }
};

Open Chrome DevTools (or similar inspection feature in other browser) and check what's going on!