Jason Chen Jason Chen - 6 months ago 35
Javascript Question

Using POST in React without form?

Lets say I have this code here:

return { food: 'Chinese' }

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

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,
, 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?


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() {
    this.state = {
      food: 'Chinese'

  handleSubmit(event) {
    const {
    } = 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 (
          onSubmit={event => this.handleSubmit(event)}>
          <p>I like <span name="food">{this.state.food}</span> food</p>
          <button type="submit">Butane</button>