List

List.jsx

import React, { Component } from "react";
import ListContext from "./context";
import "./List.css";

class List extends Component {
  state = {
    selectedItem: null
  };

  handleSelectItem = selectedItem => {
    this.setState({ selectedItem });
    this.props.onSelect(selectedItem);
  };

  render() {
    const { selectedItem } = this.state;
    const contextValue = {
      handleSelect: this.handleSelectItem
    };

    return (
      <ListContext.Provider value={contextValue}>
        <div className="list">{this.props.children({ selectedItem })}</div>
      </ListContext.Provider>
    );
  }
}

export default List;