PhotosContext.js

import { Component, createContext } from 'react';
import PropTypes from 'prop-types';

import api from './api';

const { Consumer, Provider } = createContext({
  photos: [],
});

export { Consumer };

export class PhotosContextInner extends Component {
  static propTypes = {
    api: PropTypes.object,
    children: PropTypes.any,
  };

  constructor(props) {
    super(props);

    this.state = {
      photos: [],
      fetchPhotos: this.fetchPhotos,
    };
  }

  render() {
    return <Provider value={this.state} />;
  }

  fetchPhotos = async () => {
    const { data: photos } = await this.props.api.fetchPhotos();
    this.setState({ photos: [...this.state.photos, ...photos] });
  };
}

export default function PhotosContext(props) {
  return <PhotosContextInner api={api} {...props} />;
}