Soy nuevo en Reactjs y estoy trabajando con nextjs, traté de integrar "boletín informativo", creé un componente para esto que funciona bien pero no puedo mostrar el mensaje de "éxito" o "error" en la pantalla/Página web, i Recibo el mensaje de "éxito" en la consola, pero el mensaje de "éxito/error" no aparece Aquí está mi código
import React, { useEffect, useState } from "react"; 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 { error, message } = await res.json(); if (error) { console.log(error); setError(error); } else { console.log(message); setSuccess(message); } };Y puse el siguiente código justo debajo de mi formulario de cierre, pero no se muestra nada en mi pantalla, ¿cómo puedo hacer esto?
{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>Puede deberse a intentar representar un objeto, intente JSON.stringificar los datos
En realidad, no ha tomado el valor de JSON correctamente. He publicado un código de demostración que funciona exactamente como usted quería.
Además, no ha utilizado el operador === para comparar string true . El valor de estado de JSON no está en booleano, es una cadena.
import "./styles.css"; import { useState } from "react"; export default function App() { const [error, setError] = useState(""); const [success, setSuccess] = useState(""); const subscribeMe = async (event) => { const res = await fetch( "https://mocki.io/v1/65583d53-9071-47af-b7d7-840e88763d08" ); const data = await res.json(); const error = data["status"]; const message = data["msg"]; if (error === "false") { console.log(error); setError(error); } else { console.log(message); setSuccess(message); } }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <span> {" "} {error} {success} </span> <br /> <button onClick={subscribeMe}>Press me </button> <h2>Start editing to see some magic happen!</h2> </div> ); }Aquí hay una URL de demostración https://yfv7c3.csb.app/