Item({ item, isActive, onClick }) =>
  className = if isActive: 'active' else: 'inactive'

  <li onClick={onClick} className={className}>
    {item}
  </li>




class List extends React.Component:





  activateItem(itemId): void =>
    if this.state.activeItem == itemId:
      this.setState({ activeItem: null })
    else:
      this.setState({ activeItem: itemId })


  render() ->
    { items, activeItem } = this.state


    <div>
      {if activeItem:
        <p>You have selected: {activeItem}</p>
      else:
        <p>Click an item to select one!</p>
      }

      <ul>
        {items.map((item, i) =>
          isActive = activeItem == item.id

          if not item.hidden:
            <Item
              key={i}
              item={item}
              isActive={isActive}
              onClick={() => this.activateItem(item.id)}
            />
        )}
      </ul>
    </div>
