Menggunakan Event Pada Aplikasi React

Untuk menggunakan event pada react cukup mudah. Buka file AppContent.js, lalu modifikasi seperti dibawah.

import React, {Component, Fragment} from 'react';
import Button from '@material-ui/core/Button';

export default class AppContent extends Component{
    fetchData = () =>{
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response)=> response.json())
            .then (json=>{
                let users = document.getElementById('users-list');
                json.forEach(function (el) {
                    let li = document.createElement("li");
                    li.appendChild(document.createTextNode(el.username))
                    users.appendChild(li);
                });
            });
    }

    render(){
        return(
            <Fragment>
                <p>Content goes here</p>
                <Button onClick={this.fetchData} variant="contained" color="primary">Click Me</Button>
                <ul id="users-list"></ul>
            </Fragment>
        );
    }
}

Pembahasan Code

Pada element <Button>, tambahkan event onClick, dimana fungsi fetchData akan dipanggil.

<Button onClick={this.fetchData} variant="contained" color="primary">Click Me</Button>

Tambahkan element <ul> untuk menampung data json ketika Button diclick.

<ul id="users-list"></ul>

Fungsi fetchData akan mengambil data json dari internet, lalu akan diparsing dan dikembalikan kedalam element <ul>.

    fetchData = () =>{
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response)=> response.json())
            .then (json=>{
                let users = document.getElementById('users-list');
                json.forEach(function (el) {
                    let li = document.createElement("li");
                    li.appendChild(document.createTextNode(el.username))
                    users.appendChild(li);
                });
            });
    }

Jika aplikasi dijalankan, dan Button di click, maka data akan ditarik dari alamat diatas.