Loading data form external api automatically and using some event such as on a button click in reactjs

beginner level- just creating a simple example how to load data from a external api using typescript and reactjs.

running code: link https://stackblitz.com/edit/react-ts-ek3vme

code:-

//calling data from external api

//calling data on event

import React, { Component } from 'react';

import { render } from 'react-dom';

import './style.css';

interface AppProps {

}

//user data interface

interface userData

{

key:string;

body:string;

title:string;

userId:number;

id:number;

}//urldata interface

interface urlData

{

origin:string;

url:string;

}

//app state interface

interface AppState {

name: string;

data:urlData

userdata:Array<userData>;

}

//app code

class App extends Component< AppProps,AppState> {

listName:string="click on button to load list"

load:Function=null;

constructor(props) {

super(props);

this.state = {

name: "loading.....",

data:{

origin:null,

url:null,

},

userdata:new Array<userData>()

};

}

//componentDidMount called immediately after component rendered first time

componentDidMount() {

fetch("https://httpbin.org/get")

.then(res => res.json())

.then(

(result) => {

var data:urlData={

origin:null,

url:null

};

data.origin=result.origin;

data.url=result.url;

this.setState({

name: "auto load data from rest api",

data:data

});

},

(error) => {

console.log(error);

}

)

}

//load data from external url

loadData(url:string)

{

fetch(url)

.then(res => res.json())

.then(

(result) => {

result.map((object, i)=>{

var mydata:userData=

{

key:object.id,

body:object.body,

title:object.title,

userId:object.userId,

id:object.id

}

this.state.userdata.push(mydata);

}

)

this.setState({

name: "load data on button click",

userdata:this.state.userdata

});

},

(error) => {

}

)

}

render() {

return (

<div>

<p>{this.state.name}</p>

<p>{this.state.data.url}</p>

<p>{this.state.data.origin}</p>

<button onClick={this.load=()=>{

//pass api url

this.loadData("https://jsonplaceholder.typicode.com/posts");

}}>Load data from external sources</button>

<p>{this.listName}</p>

<ul>

{this.state.userdata.map(data => (

<li key={data.key}>

<b>Heading:=> {data.title}</b><br></br>

<b>all Data:=></b>{data.body}

</li>

))}

</ul>

</div>

);

}

}

render(<App />, document.getElementById('root'));