Using POST in React without form?

Question

Lets say I have this code here:

getInitialState:function(){
return { food: 'Chinese' }
},

restaurants:function(){
  return (<div><form method="post">
   <p>I like <span name="food">{this.state.food}</span> food</p>
   <button type="submit">Butane</button>
</form></div>);
},

My only experience with POST so far has been with forms and input fields. So I would like to know how to do this without, using more static content.

In the above example, I have content that isn't derived from an input field. I would like to put the state variable, in this case, Chinese, into a POST request.

Ideally, the button labeled butane submits the info from my state into my POST. And the span name is there to assign it a name for my back-end to read it from.

How would I re-arrange this code to enable use of the state variable in a POST context?

Community · Accepted Answer · 2017-05-23 11:51:40Z

3

You can add hidden input into form

<div>
  <form method="post">
     <p>I like <span name="food">{this.state.food}</span> food</p>
     <button type="submit">Butane</button>
     <!-- Hidden fields -->
     <input type="hidden" value={this.state.food}/>
  </form>
</div>

Update

Agree with @Rishat to use AJAX call.

For another situation which you want to do a normal POST request but don't want to add any input field to your form. You can use this solution: JavaScript post request like a form submit

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 2, 2016 at 19:13

Jirat Ki

1402 silver badges5 bronze badges

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

Comments

rishat · Accepted Answer · 2016-09-02 19:44:38Z

2

Since you're working with React, chances are you develop a single-page application that doesn't reload nor does it lead a user to another location. To perform a POST request then, you need to do it asynchronously. One of the convenient ways is to use axios for that. The whole component would look like this:

import React, { Component } from 'react';
import axios from 'axios';

class X extends Component {
  constructor() {
    super();

    this.state = {
      food: 'Chinese'
    };
  }

  handleSubmit(event) {
    const {
      food
    } = this.state;

    event.preventDefault();

    // do something with form values, and then
    axios.post('https://your/api/endpoint', {
      food // + any other parameters you want to send in the POST request
    }).then(response => {
      // do something with response, and on response
    }).catch(error => {
      // do something when request was unsuccessful
    });
  }

  restaurants() {
    return (
      <div>
        <form
          method="post"
          onSubmit={event => this.handleSubmit(event)}>
          <p>I like <span name="food">{this.state.food}</span> food</p>
          <button type="submit">Butane</button>
        </form>
      </div>
    );
  }
}

edited Sep 2, 2016 at 19:44

answered Sep 2, 2016 at 19:24

rishat

8,3765 gold badges51 silver badges72 bronze badges

5 Comments

Seth Over a year ago

You're importing React without using it.

rishat Over a year ago

Because it is necessary.

Seth Over a year ago

Thanks for the link! That's helpful to know. However, wouldn't it be more expressive, and less verbose, just to import React from 'react'; and extends React.Component? If React is required solely for the purpose of post compilation reasons, that import statement doesn't express that (hence my first comment).

Jirat Ki Over a year ago

Do we need event.preventDefault() ?

rishat Over a year ago

Good suggestion! We do, and I just added it to the example code.

Collectives™ on Stack Overflow

Using POST in React without form?

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related