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.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
About Hexlet learning process
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
