Item

Item.jsx

import React from "react";
import ListContext from "./context";
import "./Item.css";

const Item = ({ id, icon, className, info, children }) => (
  <ListContext.Consumer>
    {value => (
      <button
        className={["item", className].join(" ")}
        key={id}
        onClick={() => value.handleSelect(id)}
      >
        {icon}
        <div className="item-name">{children}</div>
        {info && <div className="item-info">{info}</div>}
      </button>
    )}
  </ListContext.Consumer>
);

export default Item;