unwrapped-promises.js

import React, { Component } from "react";

class MyComponent extends Component {
  state = {
    data: [],
    error: null,
  };

  handleOnClick = () =>
    fetchData()
    .then(() => this.setState({ data }))
    .catch(error => this.setState({ error }));

  render() {
    const { data, error } = this.state;

    if (error) {
      return (
        <div className="error">
          There was an error fetching data: {error}
        </div>
      );
    }

    return (
      <div className="data">
        <button onClick={this.handleClick}>reload data!</button>
        <ul className="data-list">
          {data.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </div>
    );
  }
}