I am working on nextjs,I am integrating "newsletter",Whenever my response is true then validation message showing correct(if condition),but only show one time for 5 seconds,and whenever i am getting error then validation message(else condition) not working,means "error" message not showing Here is my code
import React, { useEffect, useState } from "react";
import FlashMessage from 'react-flash-message';
import { render } from 'react-dom';
const Subscribe = () => {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const subscribeMe = async (event) => {
const emails = email;
event.preventDefault();
const res = await fetch('https://example.com/admin-panel/Api/subscribe?email='+emails);
const data = await res.json();
const status = data["status"];
const message = data["msg"];
if (status === "false") {
setError(error);
} else {
setSuccess(message);
}
};
const changeEmail = (event) => {
const email = event.target.value;
setEmail(email);
}
And i tried with following code for display "success" or "error" message
{success && (
<FlashMessage duration={5000}>
<div class="alert alert-success">
<strong>{success}</strong>
</div>
</FlashMessage>
)}
{error && (
<FlashMessage duration={5000}>
<div class="alert alert-danger">
<strong>{error}</strong>
</div>
</FlashMessage>
)}
Given that the API response is {"status":false,"msg":"Email already exist"},data['status'] needs to be compared with the boolean value.
=== checks for both value and the type (MDN reference here). In this case it always returns false because you are comparing a string with boolean.
If you change the comparison to if( status === false ) then it should work