Soy un principiante en el manejo de la conexión de back-end, front-end y mongodb, así que lo siento si mi pregunta no se hizo en el lugar correcto.
Estaba tratando de permitir que el usuario ingrese algunos datos en un cuadro de texto y guarde los datos en una propiedad de valor, pero por alguna razón no se guarda dentro del cuerpo de datos => variable de mensaje, lo cual realmente no sé por qué. Lo que estoy tratando de hacer es llamar a la función que envía los datos en una etiqueta de botón y, cuando se llame, los datos que el usuario ingresó se enviarán al servidor.
Los valores de cuerpo de datos y valor son [objeto objeto] e indefinido respectivamente
Aquí está mi archivo ping.js. ¡Espero que el código tenga más sentido!
constructor(props) { super(props); this.state = { brand: "Ford" }; } handleSubmit = () => { console.log("its running"); let databody = { message: this.state.val, }; console.log(" the message is :" + databody); console.log(" the message is :" + this.val); return fetch("http://localhost:5000/stored", { method: "POST", body: JSON.stringify(databody), headers: { "Content-Type": "application/json", }, }) .then((res) => res.json()) .then((data) => console.log(data)); }; render() { return ( <div className="ok2"> <textarea className="message" type="text" placeholder="Write me somthing!. Also, double click to ping:) " value={this.state.val} ></textarea> <body> <button className="button" onClick={() => { this.magic(); this.handleSubmit(); //animation + //pinging the phone // this.handleButtonClick(); //setVal(() => ""); //sets the value of the box to empty }} > </button>Este es mi archivo index.js en el back-end Node js
app.post("/stored", (req, res) => { console.log("its running 2: " + req.body); db.collection("quotes").insertOne(req.body, (err, data) => { if (err) return console.log(err); res.send("saved to db: " + data); }); }); Estos son los errores que estoy recibiendo debido a este problema: 
estoy usando react.js, node.js y mongodb en código vs
Está recibiendo este error debido a cors (intercambio de recursos de origen cruzado), que simplemente se asegura de que nadie pueda realizar solicitudes a una API a menos que tenga permiso. En su backend, que creo que es express, necesita instalar cors con npm i cors y agregar estas dos líneas de código en el archivo donde está creando el servidor, es decir, index.js, app.js
const cors = require("cors"); // Importing cors app.use(cors({ origin: "http://localhost:3000" })); // Use cors before every reqVi tu captura de pantalla y encontré un error cors en la captura de pantalla. Primero, corrige el error cors. Puede guiar para corregir el error cors.
https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/
https://bigcodenerd.org/enable-cors-node-js-sin-expreso/
y luego segundo. Actualmente, no puedo entender este código.
return ( <div className="ok2"> <textarea className="message" type="text" placeholder="Write me somthing!. Also, double click to ping:) " value={this.state.val} ></textarea> <body> <button className="button" onClick={() => { this.magic(); this.handleSubmit(); //animation + //pinging the phone // this.handleButtonClick(); //setVal(() => ""); //sets the value of the box to empty }} > </button>¿Por qué necesita una etiqueta de cuerpo y funciona en el cuerpo principal?
Para la sintaxis html, guíe esto.
https://www.w3docs.com/snippets/html/html5-page-structure.html
Deseo que mi respuesta te ayude. Si tiene alguna ayuda, puede "agregar un compromiso"