CODEWITHSUNDEEP
node.jsreactjs
Sharon Shelton
Sharon Shelton

Reputation: 35

How to send data from react.js to node?

I am a beginner in web devolopment and I'm developing an application using react and nodejs. I've been looking for ways to send the data from front end i.e, react(data received from the user) to nodejs code so that I can process it and send it back to the UI. I saw some resources mentioning that I can use fetch and axios but I can't quite follow it. So basically my application is about executing the pipe commands of linux. There will be few buttons to choose which command to execute(Like sort, uniq etc). There will be a text area to get the input text and a label to display the output. So how can I send the input data to the nodejs function so that I can process it with some built-in modules and return the output to the label.My code for text area looks like this

import { useState } from "react";
  const Text_area = () =>{

    const[text,setText]  = useState('');
    const handleSubmit = (e) => {
       e.preventDefault();
       const data = {text};
       }
    return(
      <>
      <form onSubmit={handleSubmit}>
        <label>Input here</label>
        <textarea value= {text} required  onChange={(e)=>setText(e.target.value)}/>
        <button>OK</button>
      </form>
      </>
);    
  }

Share your thoughts please!

Upvotes: 2

Views: 2946

Answers (2)

Abdulhakim
Abdulhakim

Reputation: 758

I assume you have only index route, that's why fetch is pointing to index.

const[text,setText]  = useState('');
const handleSubmit = (e) => {
    e.preventDefault();
    const newText= { text };
    fetch("/", {
      method: "POST",
      headers: {"Content-Type": "application/JSON"},
      body: JSON.stringify(newText) 
    })
}

Above, fetch method is used to send your data to relevant route in your node.js file. And in your server.js file, you can code something like this to see if it works:

app.post("/", function(req, res){
    res.send(req.body);
});

Please let me know if it works for you.

Upvotes: 1

Tan Nguyen
Tan Nguyen

Reputation: 323

Think of your problem like a Form HTML element. How can a form send data to server?

Basically, they use HTTP GET/POST method. If you don't know it, Google! But for now, let just understand that: To send data from react.js to node, you need do something with HTTP GET/POST method.

<form action="/send_form" method="post">
  <input type="text" id="fname" name="fname">
  <input type="text" id="lname" name="lname">
  <input type="submit" value="Submit">
</form>

form element has done it for you. This is why you see people mentioned axios because what if I don't use form? How can I do the same thing without form?

Then how do server receive information? You will do that by code something in Node.js. Googled yourself :>.

Then people mentioned Express.js. Think of it as "React" of Node.js, which mean it's a framework. You don't need to know "Express.js" to receive information sent from React.

Upvotes: 1

Related Questions