How to send data from react.js to node?

Question

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!

@MWO How can I access that data from the server (node) side? — Sharon Shelton
– Sharon Shelton, Commented Dec 18, 2021 at 14:38
install this package npmjs.com/package/express and write a post route — MWO
– MWO, Commented Dec 18, 2021 at 14:54

Abdulhakim · Accepted Answer · 2021-12-19 15:48:57Z

1

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.

answered Dec 19, 2021 at 15:48

Abdulhakim

76810 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tan Nguyen · Accepted Answer · 2021-12-18 17:11:41Z

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.

Collectives™ on Stack Overflow

How to send data from react.js to node?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related