React JS and DRF — CRUD request to Django Rest Framework.

Hello all. In this blog, I am explaining how to make GET, POST, DELETE requests to any API. Here I am using a CRUD API created before in my blog.

In my previous blog, I have explained how to add Bootstrap to our React and how to create basic forms and tables.

1. Installing Axios

Axios is a react Library used to make requests like GET, POST, DELETE, PATCH and so on.

$ npm install axios

2. Fetching Employee Data with Axios

src/Pages/Home.js

import React, { Component } from 'react'
import Table from 'react-bootstrap/Table'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
const axios = require('axios');
export default class Home extends Component {
state = {
    isLoading: true,
    employee: [],
    error: null
}
constructor(props) {
    super(props);
}
fetchEmp() {
    fetch(`http://localhost:8000/employee/api`)
        .then(response => response.json())
        .then(data =>
           this.setState({
               employee: data,
               isLoading: false,
           })
        )
       .catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
    this.fetchEmp();
}
render() {
    return (
        <Container style={{ marginTop: '100px' }}>
        <Button variant="secondary" style={{ float: 'right', margin: '20px' }} onClick={() => this.props.history.push('/createemp')}>Add a Employee</Button>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>ID</th>
              <th>Employee Name</th>
              <th>Employee Email</th>
              <th>Employee Mobile</th>
              <th>Action</th>
            </tr>
          </thead>
           <tbody>
              {!this.state.isLoading?this.state.employee.map((user)=>{
              return (
                 <tr key={user.id}>
                   <td>{user.id}</td>
                   <td>{user.emplyee_name}</td>
                   <td>{user.employee_email}</td>
                   <td>{user.emplyee_name}</td>
                   <td><Button onClick={() => this.props.history.push(`/updateemp/${user.id}`)}>Update</Button>    <Button variant="danger" >Delete</Button></td>
                 </tr>
              )
              })
              :
                 "LOADING"
              }
           </tbody>
        </Table>
     </Container>
    )
  }
}

List View

3. Create an Employee

src/Pages/Create.js

import React, { Component } from 'react'
import { Container , Form, Row, Col, Button} from 'react-bootstrap'
const axios = require('axios').default;
export default class Create extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emp_regno: '',
      emp_name: '',
      emp_email: '',
      emp_mobile: '',
    };
    this.handleChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
onChange = (e) => this.setState({ [e.target.name]: e.target.value });
handleSubmit(event) {
    axios.post('http://localhost:8000/employee/api/create', {
        emplyee_regNo: this.state.emp_regno,
        emplyee_name: this.state.emp_name,
        employee_email: this.state.emp_email,
        employee_mobile: this.state.emp_mobile
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    event.preventDefault();
}
render() {
  return (
      <Container style={{ marginTop: '100px' }}>
        <h1>Add Employee</h1>
        <Form style={{ margin: '50px' }} >
          <Form.Row>
            <Col>
               <Form.Control placeholder="Employee RegNo" name="emp_regno" value={this.state.emp_regno} onChange={this.onChange}/>
            </Col>
            <Col>
               <Form.Control placeholder="Employee Name" name="emp_name" value={this.state.emp_name} onChange={this.onChange}/>
            </Col>
            <Col>
               <Form.Control placeholder="Employee Email" name="emp_email" value={this.state.emp_email} onChange={this.onChange}/>
            </Col>
            <Col>
               <Form.Control placeholder="Employee Mobile" name="emp_mobile" value={this.state.emp_mobile} onChange={this.onChange}/>
            </Col>
          </Form.Row>
          <Button style={{ margin: '30px', float: 'right' }} onClick={this.handleSubmit}>Add Employee</Button>
       </Form>
     </Container>
      )
   }
}

4. Deleting Employee

src/Pages/Home.js

constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
}

handleDelete(id){
    axios.delete(`http://localhost:8000/employee/api/${id}/delete`)
}
<tbody>
    {!this.state.isLoading?this.state.employee.map((user)=>{
        return (
            <tr key={user.id}>
                <td>{user.id}</td>
                <td>{user.emplyee_name}</td>
                <td>{user.employee_email}</td>
                <td>{user.emplyee_name}</td>
                <td><Button onClick={() => this.props.history.push(`/updateemp/${user.id}`)}>Update</Button>    <Button variant="danger" onClick={()=>this.handleDelete(user.id)}>Delete</Button></td>
           </tr>
         )
         })
         :
          "LODING"
    }
</tbody>

In my next blog, I am explaining how to make an authenticated request in REACT and Django REST Framework

In my previous blog, I have explained how to create simple forms with Bootstrap to React.

Feel free to contact me for any queries.

Email: sjlouji10@gmail.com

Linkedin: https://www.linkedin.com/in/sjlouji/

The complete code can be found on my Github: https://github.com/sjlouji/React-Js-and-DRF---CRUD-Form.git

Happy coding…