Fix various React warnings

frontend/src/components/DashboardsDropdown.jsx

@@ -91,9 +91,9 @@ export default class DashboardsDropdown extends Component {
 
                 <OnClickOut onClickOut={this.closeDropdown}>
                     <div className={cx('NavDropdown inline-block cursor-pointer', { 'open': dropdownOpen })}>
-                        <a onClick={this.toggleDropdown}>
+                        <span onClick={this.toggleDropdown}>
                             {children}
-                        </a>
+                        </span>
 
                         { dropdownOpen ?
                             <div className="NavDropdown-content DashboardList NavDropdown-content--dashboards">
@@ -109,7 +109,7 @@ export default class DashboardsDropdown extends Component {
                                 :
                                     <ul className="NavDropdown-content-layer">
                                         { dashboards.map(dash =>
-                                            <li className="block">
+                                            <li key={dash.id} className="block">
                                                 <a data-metabase-event={"Navbar;Dashboard Dropdown;Open Dashboard;"+dash.id} className="Dropdown-item block text-white no-decoration" href={"/dash/"+dash.id} onClick={this.closeDropdown}>
                                                     <div className="flex text-bold">
                                                         {dash.name}

frontend/src/dashboard/components/DashboardHeader.jsx

@@ -146,9 +146,9 @@ export default class DashboardHeader extends Component {
                 key="add"
                 ref="addQuestionModal"
                 triggerElement={
-                    <a data-metabase-event="Dashboard;Add Card Modal" title="Add a question to this dashboard">
+                    <span data-metabase-event="Dashboard;Add Card Modal" title="Add a question to this dashboard">
                         <Icon className={cx("text-brand-hover cursor-pointer", { "Icon--pulse": isEmpty })} name="add" width="16px" height="16px" />
-                    </a>
+                    </span>
                 }
             >
                 <AddToDashSelectQuestionModal

frontend/src/directives.js

@@ -151,7 +151,7 @@ MetabaseDirectives.directive('mbReduxComponent', ['$timeout', function ($timeout
 
             ReactDOM.render(
                 <Provider store={scope.store}>
-                    {() => <scope.Component {...scope.props} />}
+                    <scope.Component {...scope.props} />
                 </Provider>,
                 element[0]
             );

frontend/src/visualizations/NewBarChart.jsx

@@ -82,7 +82,7 @@ export default class NewBarChart extends Component {
 
     renderLegendItem(card, index) {
         return (
-            <span className="h3 mr2 mb1 text-bold flex align-center">
+            <span key={index} className="h3 mr2 mb1 text-bold flex align-center">
                 <span className="inline-block circular" style={{width: 13, height: 13, backgroundColor: COLORS[index % COLORS.length]}} />
                 <span className="ml1">{card.name}</span>
             </span>

frontend/src/visualizations/TableSimple.jsx

@@ -40,6 +40,7 @@ export default class TableSimple extends Component {
                                 { cols.map((column, colIndex) => <th key={colIndex}>{this.getDatasetColumnTitleByIndex(colIndex)}</th>) }
                             </tr>
                         </thead>
+                        <tbody>
                         {
                             rows.slice(0, 100).map((row, rowIndex) =>
                                 <tr key={rowIndex}>
@@ -47,6 +48,7 @@ export default class TableSimple extends Component {
                                 </tr>
                             )
                         }
+                        </tbody>
                     </table>
                 </div>
         );