cecigarcia

import React, { Component } from "react";

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

  handleOnClick = () =>
    fetchData()

cecigarcia

export const cancellablePromise = promise => {
  let isCanceled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      value => (isCanceled ? reject({ isCanceled, value }) : resolve(value)),
      error => reject({ isCanceled, error }),
    );
  });

cecigarcia

import React, { Component } from "react";
import cancelablePromise from "./cancelable-promise";

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

  pendingPromises = [];

cecigarcia

import React, { Component } from "react";

class CustomComponent extends Component {
  apiMethod() { /* ... */ }
}

class ParentComponent extends Component {  
  handleClick = () => this.component.apiMethod();

  render() {

cecigarcia

import React, { Component } from "react";

class CustomComponent extends Component {
  apiMethod() { /* ... */ }
};

const StyledCustomComponent = props => (
  <CustomComponent {...props} style={{ padding: 10 }} />
);

cecigarcia

import React, { Component } from "react";

class CustomComponent extends Component {
  apiMethod() { /* ... */ }
}

const StyledCustomComponent = props => (
  <CustomComponent
    ref={props.componentRef}
    {...props}

cecigarcia

import React, { Component } from "react";

class CustomComponent extends Component {
  apiMethod() { /* ... */ }
}

class StyledCustomComponent extends Component {
  apiMethod() {
    this.wrappedComponent.apiMethod();
  }

cecigarcia

import React, { Component } from "react";

class CustomComponent extends Component {
  constructor(props) {
    super(props);
    this.innerRef = props.innerRef || (() => null);
  }
  
  componentDidMount = () => {
    this.innerRef(this);

cecigarcia

import React, {Component} from "react";
import translations from "./translations";

class LocaleProvider extends Component {
  state = { locale: "es" };

  // Defines the Context that React should
  // pass down to any component in the subtree
  getChildContext() {
    return {

cecigarcia

import React, {Component} from "react";

// Create the LocaleContext with a default value
const LocaleContext = React.createContext({ locale: "en", changeLocale: () => null });

class LocaleProvider extends Component {
  state = { locale: "es" };

  render() {
    const value = {