Working with asynchronous code in React is not particularly remarkable compared to what we previously discussed in the Asynchronous Programming course. But it does not hurt to run through it again.
class Loader extends React.Component {
constructor(props) {
super(props);
this.state = { url: null };
}
handleClick = async () => {
const res = await axios.get('/images/random');
this.setState({ url: res.data });
}
render() {
const { url } = this.state;
return (
<div>
<button onClick={this.handleClick}>Load Random Image</button>
{url && <img src={url} />}
</div>
);
}
}
As you can see above, we can easily make the handler asynchronous, and everything else will be okay.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
