Jason Chen Jason Chen - 3 months ago 11
Javascript Question

Using POST in React without form?

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

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;

    if (form) {
      // 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>
    );
  }
}
Comments