Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

597
Vistas
Why is JSON.stringify is rerturning null?

The user is supposed to input some text in a box and be sent from the front end (react js) to mongodb passing by nodejs. All this is working just fine but the problem is that what is being sent is just null instead of the actual text. So I went ahead and consoled.log JSON.stringify and surprisingly it was returning {}.

Please let me know if im missing anything.

pingbutton.js file:

const Pingbutton = () => {
const [form, setForm] = useState({
    message: "",
  });
  const navigate = useNavigate();

  function updateForm(value) {
    
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

    async function onSubmit(e) {
 console.log("This is e: " + e);
    console.log("This is form: " + form);
    e.preventDefault();
  
    const newMessage = { ...form };
    console.log("3: " + newMessage);
    console.log("5: " + JSON.stringify(newMessage));

    await fetch("http://localhost:5000/record/add", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newMessage),
    }).catch((error) => {
      window.alert(error);
      return;
    });

    setForm({ message: "" });
    navigate("/");
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <textarea
          className="message"
          type="text"
          placeholder="Type somthing!"
          // value={this.state.val}
        ></textarea>
        <div className="body">
          <button
            className="button"
            type="text"
            value={form.name}
            onClick={(e) => {
              magic();
              updateForm({ message: e.target.value });
              handleButtonClick();
            }}
          >
            <span className="default">Ping</span>
            <span className="success">Wohoo! You Pinged Me!</span>
            <div className="left"></div>
            <div className="right"></div>
          </button>

        </div>
      </form>
    </>
  );
};

export default Pingbutton;

This is a picture of my console: enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

In your form, you aren't handling the textarea changes. To do so I updated the JSX, see below:

  return (
    <>
      <form onSubmit={onSubmit}>
        <textarea
          className="message"
          type="text"
          placeholder="Type somthing!"
          value={form.message}
          onChange={(e) => updateForm({ message: e.currentTarget.value})}
        ></textarea>
        <div className="body">
          <button
            className="button"
            type="submit"
          >
            <span className="default">Ping</span>
            <span className="success">Wohoo! You Pinged Me!</span>
            <div className="left"></div>
            <div className="right"></div>
          </button>
        </div>
      </form>
    </>
  );

Since you are using an onSubmit with your form, you could also make your button of type="submit" and remove the onClick handler, unless you need that for something else.

To handle the textarea change, add an onChange handler to that element, similar to what you did already on the button.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda