Hi Dev,

In this quick guide, we will teach you react js axios put request example. We will use react js axios put/patch example. I explained simply about react.js axios put example. It's a simple example of react axios put json example.

In this example, i will show you how to make Axios PUT Request in React JS App. we will install axios using npm command. Then we will use "jsonplaceholder" demo api for get all users and delete post using PUT request. we will create simple table with ID, Title and Body and get data from get request and add edit button to edit post.

So, let's see follow the below step to create simple example with axios get request.

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-example

In this step, we need to install axios npm package to use their functions. let's run below command:

npm install axios

In this step, we will install bootstrap npm package to use design css. let's run below command:

npm install react-bootstrap bootstrap

Here, we will call two apis for getting posts and another for deleting post using axios request.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import React from 'react';
import axios from 'axios';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';

export default class PostList extends React.Component {

  /*------------------------------------------
  --------------------------------------------
  constructor()
  --------------------------------------------
  --------------------------------------------*/
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      posts: [],
      forms: {title: '', body: '', id: ''}
    };

  }

  /*------------------------------------------
  --------------------------------------------
  handleUserInput()
  --------------------------------------------
  --------------------------------------------*/
  handleUserInput (event) {
    let forms = this.state.forms;
    forms[event.target.name] = event.target.value;
    this.setState({forms:forms});
  }

  /*------------------------------------------
  --------------------------------------------
  handleSubmit()
  --------------------------------------------
  --------------------------------------------*/
  handleSubmit (e) {
    e.preventDefault();
    axios.put(`https://jsonplaceholder.typicode.com/posts/`+this.state.forms.id,  this.state.forms )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  /*------------------------------------------
  --------------------------------------------
  handleShow()
  --------------------------------------------
  --------------------------------------------*/
  handleShow = (post) => {
    console.log(post);
    this.setState({forms:{title: post.title, body: post.body, id: post.id}});
    this.setState({ show: true });
  }

  /*------------------------------------------
  --------------------------------------------
  handleClose()
  --------------------------------------------
  --------------------------------------------*/
  handleClose  = () => {
    this.setState({ show: false });
  }
  
  /*------------------------------------------
  --------------------------------------------
  componentDidMount()
  --------------------------------------------
  --------------------------------------------*/
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`)
      .then(res => {
        const posts = res.data;
        this.setState({ posts: posts });
      })
  }

  /*------------------------------------------
  --------------------------------------------
  render()
  --------------------------------------------
  --------------------------------------------*/
  render() {

    return (
      <div className="container">
        <h1>React JS Axios PUT Request Example - MyWebtuts.com</h1>
  
        <table className="table table-bordered">
            <thead>
              <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Body</th>
                  <th>Action</th>
              </tr>
            </thead>
  
            <tbody>
              {this.state.posts.map((post) => (
                <tr key={post.id}>
                  <td>{post.id}</td>
                  <td>{post.title}</td>
                  <td>{post.body}</td>
                  <td>
                    <Button variant="primary" onClick={()=> this.handleShow(post)}>Edit</Button>
                  </td>
                </tr>
              ))}
            </tbody>
  
        </table>

          <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit Post</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form onSubmit={(e) => {this.handleSubmit(e)}}>
              <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Title</Form.Label>
                <Form.Control 
                  type="title" 
                  placeholder="Enter Title"
                  value={this.state.forms.title}
                  name="title"
                  onChange={(event) => this.handleUserInput(event)} />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label>Body</Form.Label>
                <Form.Control as="textarea"
                    placeholder="Body"
                    name="body"
                    style={{ height: '100px' }}
                    value={this.state.forms.body}
                    onChange={(event) => this.handleUserInput(event)} />
              </Form.Group>
              <Button variant="primary" type="submit">
                Submit
              </Button>
            </Form> 
          </Modal.Body>
        </Modal>

      </div>
    )
  }
}

In the last step run your project using bellow command.

npm start

I hope it can help you...