body.jsx

  render () {
    return (
      <div class="clearfix">
        {/* = render 'inventories/show/quick_add_form' if policy(:campaign).new? */}
        {/* = render 'inventories/show/table_legend' */}
      </div>

      {/* -
        period_width = 5
        panel_width = 23
      -*/}
      {/* # TODO: Some how make this less hacky. But we really need fix-width columns */}
      <table class="table table-bordered table-condensed inventory small inventory-data-table" style="width: auto">
      /* etc */
     )
   }

You can only return a single JSX Element in the render method. You are currently returning 2 (<div> and <table>).
What you can do is encapsulate the current block in a div like this:

<div>
   <div class="clearfix">
        {/* = render 'inventories/show/quick_add_form' if policy(:campaign).new? */}
        {/* = render 'inventories/show/table_legend' */}
   </div>

   {/* -
        period_width = 5
        panel_width = 23
   -*/}
   {/* # TODO: Some how make this less hacky. But we really need fix-width columns */}
   <table class="table table-bordered table-condensed inventory small inventory-data-table" style="width: auto">
</div>