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?

Answer 1

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

Answer 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>
    );
  }
}