title: Algolia table not displaying properly
body: <p>How do I set the Bootstrap table to display Algolia search results properly?</p>
  
  <p>I've tried to put Highlights into tds, but the compiler somewhy thinks the whole return content is just a cell, not the row.
  Here's the React compiler result:</p>
  
  <p><a href="https://i.stack.imgur.com/D7J2B.png" rel="nofollow noreferrer">incorrect table view</a></p>
  
  <pre><code>import React, { Component } from "react";
      import algoliasearch from "algoliasearch/lite";
      import {
        InstantSearch,
        Highlight,
        Hits
      } from "react-instantsearch-dom";
      import PropTypes from "prop-types";
      import "./Algolia.css";
      import { Helmet } from "react-helmet";
  
      const searchClient = algoliasearch(
        'ZL7V6958NY',
        '6ccdb3835e97ced1dc5429d1f7c723a5'
      );
  
      const pageTitle = "Продавцы технической соли";
  
      class SaltDealers extends Component {
        render() {
          return (
            &lt;div className="container"&gt;
              &lt;Helmet&gt;
                &lt;title&gt;{pageTitle}&lt;/title&gt;
                &lt;meta
                  name="description"
                  content={pageTitle}
                /&gt;
                &lt;meta
                  property="og:title"
                  content={pageTitle}
                /&gt;
                &lt;meta name="keywords" content="соль техническая, купить техническую соль, соль техническая +в мешках, соль техническая галит, соль техническая цена" /&gt;
              &lt;/Helmet&gt;
              &lt;div className="col-md-8 ml-auto mr-auto"&gt;
                &lt;h1 className="title text-center"&gt;{pageTitle}&lt;/h1&gt;
              &lt;/div&gt;
              &lt;table class="table"&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th scope="col"&gt;Company&lt;/th&gt;
                    &lt;th scope="col"&gt;Phone&lt;/th&gt;
                    &lt;th scope="col"&gt;Website&lt;/th&gt;
                    &lt;th scope="col"&gt;City&lt;/th&gt;
                    &lt;th scope="col"&gt;Amount&lt;/th&gt;
                    &lt;th scope="col"&gt;Type&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;InstantSearch indexName="salt_dealers" searchClient={searchClient}&gt;
                    &lt;Hits hitComponent={Hit} /&gt;
                  &lt;/InstantSearch&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;       
            &lt;/div&gt;
          );
        }
      }
  
      function Hit(props) {
        return (
          &lt;tr&gt;
            &lt;th scope="row"&gt;
              &lt;Highlight attribute="company" hit={props.hit} /&gt;
            &lt;/th&gt;
            &lt;td&gt;
              &lt;Highlight attribute="phone" hit={props.hit} /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Highlight attribute="website" hit={props.hit} /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Highlight attribute="city" hit={props.hit} /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Highlight attribute="amount" hit={props.hit} /&gt; кг
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Highlight attribute="type" hit={props.hit} /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      }
  
      Hit.propTypes = {
        hit: PropTypes.object.isRequired,
      };
  
      export default SaltDealers;
  </code></pre>
  
  <p>The expected result is some small change in JSX, Maybe we need a key in, but this syntax doesn't work somewhy.</p>
  
  <pre><code>&lt;tr key={ObjectID}&gt;
  </code></pre>