window.fetch
API can be used to make requestscomponentDidMount()
is recommended as a best practiceclass App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: []
};
}
/* This is where data will be fetched from */
componentDidMount() {}
render() {
const { items } = this.state;
return (
<ul>
{items.map(item => (
<li key={item.id}>
<h3>{item.title}</h3>
<p>{item.body}</p>
</li>
))}
</ul>
);
}
}
setState({some: 'state'})
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>
);
}
}
}
fetch
using APIs happenclass App extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(
result => {
this.setState({
isLoaded: true,
items: result
});
},
error => {
this.setState({
isLoaded: true,
error: error
});
}
);
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
console.log(this.state.items);
return (
<ul>
{items.map(item => (
<li key={item.id}>
<h3>{item.title}</h3>
<p>{item.body}</p>
</li>
))}
</ul>
);
}
}
}
https://codesandbox.io/embed/p99mqrq9z0
See the Pen Fetching API Data by Joshua Burke (@Dangeranger) on CodePen.
/