I'm a beginner in using states in reactjs so im sorry if my question shouldn't be asked in the right spot.Using React js, Node js and mongodb

So i created a constructor and initialized a variable called val inside it and passed that variable in a value property in a textarea tag so the user would enter somthing and it would be saved in the val variable (im not sure if thats the right way of doing it, so thats why im asking!). Also, I created a function called handleSubmit that would get the variable val and save it in mongodb, and i called that function in the button the user supposed to click when he passes in somthing. But all that doesn't seem to be working with me.

Here is my ping.js file:

class Pingbutton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: "Ford" };
  }

  handleSubmit = () => {
    // if we get state error then we need to put it in a claa and call the constructot and then call the function using this.state.the name of the function
    console.log("its running 1");
    let databody = {
      message: this.state.val,
    };
    console.log(" the message is :"   databody.message);
    console.log(" the message is :"   this.state.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.setState.val}
        ></textarea>
          <button
            className="button"
            onClick={() => {
              this.magic();
              this.handleSubmit(); //animation   //pinging the phone
              // this.handleButtonClick(); //setVal(() => ""); //sets the value of the box to empty
            }}
          >
          </button>
      </div>
    );
  }
}

export default Pingbutton;

and this is the back-end (nodejs) index.js file:

const express = require("express");
const cors = require("cors"); // Importing cors
var request = require("request");
const dotenv = require("dotenv");
const port = 5000;
var request = require("request");
var util = require("util");
const connectDB = require("./config/db");
require("dotenv").config({ path: "./config/config.env" });


const app = express();
dotenv.config();
connectDB();

app.use(cors({ origin: "http://localhost:3000" }));
app.get("/", (req, res) => {
  res.send("Hey there!");
});

app.use(cors({ origin: "http://localhost:3000" }));
app.get("/Pinged", function (req, res) {
  find_my_iphone("[email protected]", "Faresomar123", "Omar");
  res.send("Pinged!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
});

app.use(cors({ origin: "http://localhost:3000" }));
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);
  });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

I have been getting Ford in the two console in the front-end after typing somthing in the box and clicking the button (excuting the handleSubmit) function). I tried doing this.state.val but didnt work then i changed it to this.setState.val and didnt work either.

I would appreciate the help.

THANK YOU!

CodePudding user response：

The answer for that would be to create a function that does all that as following:

class App extends React.Component {
  constructor() {
    super();
    this.state = {header: 'yeaheheh'};
  }
  changeHeader = (e) => {
     e.preventDefault();
    let newHeader = this.textInput.value;
    console.log('submitted');
    this.setState({header : newHeader});
  }
  render() {
    return (
      <div>
            <h1>{this.state.header}</h1>
            <form onSubmit={this.changeHeader} className="change-header-form">
                <input id="input" ref={(input) => { this.textInput = input; }} type="text" placeholder="Enter Text Here" />
                <input type="submit" value="Submit" />
            </form>
          </div>  
    );
  }
}

ReactDOM.render(<App />, document.getElementById('test'));

The full answer for that can be found in that link: Change a state in react