How to handle POST request in reactjs?

Question

I have my ReactJS app running in http://localhost:3000/. I am receiving below form data to my React page as a POST request

<form action="http://localhost:3000/" method="post">
  Employee Id: <input type="text" name="eid"><br>
  Department Id: <input type="text" name="did"><br>
  <input type="submit" value="Submit">
</form>

My react app should be able to handle this POST request and render the UI as below

<h1>{eid}</h1>
<h1>{did}</h1>

I am able to handle GET request using react router but struggling to handle POST request. How can I achieve this?

Slava Nikulin · Accepted Answer · 2020-10-12 16:01:45Z

7

That is not possible if your React app is static(not server side rendered). When you send some POST request to your react app, nginx(or other server) will not allow that kind of action(you cannot post to static files) Even if you bypass that restriction, react script will not have any data from your POST request, because nginx will process your request and return just a html with react script to you

answered Oct 12, 2020 at 16:01

Slava Nikulin

5255 silver badges16 bronze badges

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

Comments

Logesh P · Accepted Answer · 2020-01-06 18:21:40Z

0

It will not work like php.. you need to have something like backend (node or php to pass the data) or even some site to accept the request..

answered Jan 6, 2020 at 18:21

Logesh P

2274 silver badges18 bronze badges

Comments

Piotr Żak · Accepted Answer · 2020-01-06 15:24:53Z

-3

First, you need maybe some theoretical view:

https://pusher.com/tutorials/consume-restful-api-react

https://www.robinwieruch.de/react-hooks-fetch-data

You should firstly save data
You save them to the state
You display them in the part where it is rendered

To download data from api (GET)- you don't do it directly in form - you only use either ComponentDidMount or UseEffect.

  componentDidMount() {
    fetch(ApiURL)
      .then(res => res.json())
      .then(res => this.setState({ planets: res }))
      .catch(() => this.setState({ hasErrors: true }));
  }

  useEffect(async () => {
    const result = await axios(
      ApiURL,
    );
    setData(result.data);
  });

To send data to api (POST)- It's complicated - you need information about client-server communication

Straight from the React docs:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

answered Jan 6, 2020 at 15:24

Piotr Żak

2,1426 gold badges21 silver badges36 bronze badges

4 Comments

William Brain Over a year ago

Thanks for the response. There is an external application called example.com will redirect to my localhost:3000 with POST request. I can handle POST request in Node/Express. Is there any similar way in React page?

Piotr Żak Over a year ago

Yes, if you send it by fetch from React, you can handle it in node.js on backend site, and do with this data whatever (send do database, mutate etc.)

William Brain Over a year ago

How do i forward these POST inputs from react to node.js server?

Piotr Żak Over a year ago

Come on chat - chat.stackoverflow.com/rooms/205536/post-api Can You? or require 20 rep?

Collectives™ on Stack Overflow

How to handle POST request in reactjs?

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related