React Sample App with API Call and Update to Latest Version

#react #vscode #npm

A while back I created a small and simple React app in order to fetch a random user from the RandomUser.me API.

I have a RandomUser component which simply looks like this:

	import React, {Component} from 'react';

	class RandomUser extends Component {
	constructor() {
	super();
	this.state = {
	user: [],
	isLoading: false,
	error: null
	}
	}

	componentDidMount() {
	this.setState({ isLoading: true });
	this.fetchRandomUser();
	}

	fetchRandomUser = async() => {
	try {
	await fetch('https://randomuser.me/api/')
	.then(results => {
	return results.json();
	})
	.then(data => {
	let user = data.results.map((user) => {
	let userElm = '';

	if (typeof user !== undefined && typeof user.name !== undefined && typeof user.picture != undefined) {
	userElm = <div key={user}>
	<h2>{user.name.first} {user.name.last}</h2>
	<img src={user.picture.large} alt="" />
	</div>;
	}

	return(userElm)
	});

	this.setState({user: user, isLoading: false});
	});
	}
	catch(error) {
	this.setState({ error: error, isLoading: false });
	}
	}

	render() {
	let { user, isLoading, error } = this.state;

	if (error) {
	return <p>{error.message}</p>;
	}

	if (isLoading) {
	return <p>Loading...</p>;
	}

	return (
	<div>
	{user}
	</div>
	)
	}
	}

	export default RandomUser;

view raw RandomUser.js hosted with ❤ by GitHub

We fetch a user from the API and present the user's name and picture, if present.

In our App.js file we then return the RandomUser component together with some HTML:

	import React from 'react';
	import RandomUser from './RandomUser';

	import './App.css';

	function App() {
	return (
	<div className="App">
	<header className="App-header">
	<RandomUser />
	</header>
	</div>
	);
	}

	export default App;