// 1. Add state for success and error messages
    const [successMessage, setSuccessMessage] = useState("");
    const [errorMessage, setErrorMessage] = useState("");

   // 2. Clear any existing messages when a new submission starts
        setSuccessMessage("");
        setErrorMessage("");

  // 3. Set the success message
            setSuccessMessage(response.message || "Signup successful!");

// 4. Set the error message
            setErrorMessage(error.message || "Signup failed. Please try again.");

{/* 5. Conditionally render the messages */}
                {successMessage && (
                    <div style={{ color: "green", marginBottom: "10px" }}>
                        {successMessage}
                    </div>
                )}
                
                {errorMessage && (
                    <div style={{ color: "red", marginBottom: "10px" }}>
                        {errorMessage}
                    </div>
                )}
                  

Example:

import { useState } from "react";
import { signupUser } from "../../../services/authService"; 

function Signup() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [password, setPassword] = useState("");
    
    // 1. Add state for success and error messages
    const [successMessage, setSuccessMessage] = useState("");
    const [errorMessage, setErrorMessage] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        // 2. Clear any existing messages when a new submission starts
        setSuccessMessage("");
        setErrorMessage("");
        
        const userData = { name, email, phone, password };
        
        try {
            const response = await signupUser(userData);
            
            // 3. Set the success message
            setSuccessMessage(response.message || "Signup successful!");
            
            // Clear form fields
            setName("");
            setEmail("");
            setPhone("");
            setPassword("");
        } catch (error) {
            console.error("Signup Error:", error);
            
            // 4. Set the error message
            setErrorMessage(error.message || "Signup failed. Please try again.");
        }
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                <h2>User Signup</h2>
                
                {/* 5. Conditionally render the messages */}
                {successMessage && (
                    <div style={{ color: "green", marginBottom: "10px" }}>
                        {successMessage}
                    </div>
                )}
                
                {errorMessage && (
                    <div style={{ color: "red", marginBottom: "10px" }}>
                        {errorMessage}
                    </div>
                )}

                <input 
                    type="text" 
                    placeholder="Name" 
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <input 
                    type="email" 
                    placeholder="Email" 
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input 
                    type="text" 
                    placeholder="Phone" 
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                />
                <input 
                    type="password" 
                    placeholder="Password" 
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <button type="submit">Sign Up</button>
            </form>
        </>
    );
}

export default Signup;