Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

595
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda