12. Post Data Ke Rest API Menggunakan React Js | Belajar React Js pemula

12. Post Data Ke Rest API Menggunakan React Js | Belajar React Js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

Post Data Ke Rest API Menggunakan React Js

pada tutorial sebelumnya kita sudah belajar bagaimana caranya get data dari rest api menggunakan react js, nah pada tutorial kali ini kita akan belajar menggunakan react js. Untuk berintraksi dengan rest api disini kita akan menggunakan axios sama seperti tutorial sebelumnya. jadi jika belum paham cara menginstal axios pada project react temen-temen silahkan buka tutorial seblumnya. disana sudah dijelakan cara menambhakan axios pada project react temen-temen. sebelum masuk pada tutorial ini temen-temen harus paham state, action, handle form pada react js karana pada tutorial kali ini kita akan meggunakannya. pada tutorial kali ini kita akan ngpost data meggunakan fake rest api https://jsonplaceholder.typicode.com/ untuk data yang akan kita post adalah data blog atau post blog baru dan untuk library yang kita gunakan adalah axios untuk berintraksi dengan rest api.

import React from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import "./styles.css";

class App extends React.Component {
  constructor(){
    super();
 this.state={
      title: '',
      body: '',
      userId: 1
    }
  }  
  onChange =(e) =>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
 onSubmit=()=>{
    let data ={
      title: this.state.title,
      body: this.state.body,
      userId: this.state.userId
    }
    axios.post('https://jsonplaceholder.typicode.com/posts',data)
 .then((res)=>{
      console.log(res)
 }).catch((err)=>{
      console.log(err)
    })
  }
  render() {
    return (
      <div className="App">
        <div>
          <label>Title</label>
          <input type="text" id="title" onChange={this.onChange} />
        </div>
        <div>
          <label>Body</label>
          <textarea id="body" onChange={this.onChange} />
        </div>
        <button type="button" onClick={this.onSubmit}>Post</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

demikian lah cara untuk post data ke rest api menggunakan react js dan axios, cukup simple kan?
Mau liat atau download source code aplikasi premium bisa disini.

Tweet