where to fetch data in react code example
Example 1: using componentdidmount with fetch
Component with Data
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
isLoaded: false,
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(result => {
this.setState({
isLoaded: true,
items: result
});
});
}
render() {
const { items } = this.state;
if (!isLoaded) {
return <div>Loading ... </div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.id}>
<h3>{item.title}</h3>
<p>{item.body}</p>
</li>
))}
</ul>
);
}
}
}
Fetching Data - Ha
Example 2: fetch api react
import React, { Component, Fragment } from 'react';
export class FetchJsonController extends Component
{
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch(this.props.src)
.then(response => response.json())
.then(data => {
console.log(data);
this.setState({ data })
});
}
render() {
const _data = this.state.data;
const children = React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
jsonData: _data
});
});
return (
<div>{ children }</div>
)
}
}
<FetchJsonController src="somefile.json">
<SomeComponent />
</FetchJsonController>
Example 3: React get method
componentWillMount(){
fetch('/getcurrencylist',
{
method: "get",
dataType: 'json',
})
.then((res) => res.json())
.then((data) => {
var currencyList = [];
for(var i=0; i< data.length; i++){
var currency = data[i];
currencyList.push(currency);
}
console.log(currencyList);
this.setState({currencyList})
console.log(this.state.currencyList);
})
.catch(err => console.log(err))
}
Example 4: using componentdidmount with fetch
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ data }));
}
...
}
export default App;