Skip to content

Instantly share code, notes, and snippets.

@JoaoCnh
Created January 18, 2018 23:40
Show Gist options
  • Save JoaoCnh/51397bd13b1a6097555c5c899f203a2c to your computer and use it in GitHub Desktop.
Save JoaoCnh/51397bd13b1a6097555c5c899f203a2c to your computer and use it in GitHub Desktop.
Cars list component
export default class CarsList extends React.Component {
state = {
cars: [],
isLoading: false,
};
_fetch = async () => {
const res = await fetch("api/url");
const json = await res.json();
this.setState({ cars: json, isLoading: false });
};
componentDidMount() {
this.setState({ isLoading: true }, this._fetch);
}
render() {
const { cars, isLoading } = this.state;
return (
<div>
<h3>My cards</h3>
{isLoading && <p>Loading cards m8</p>}
{cars.length > 0 && (
<ul>
{cars.map(car => (
<li key={car.id}>
{car.title}
</li>
)}
</ul>
)}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment