table-hover (bootstrap) not work with react

Question

I have already installed popper and jquery with NPM.

and imported in App.js:

import '../node_modules/jquery/dist/jquery.min.js'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

The css part seems to work fine, but I don't see any jquery( bootstrap.js) running. When I use table, table-striped and table-hover does not work. Here is the code I was testing, from Traversy Media( I pasted inside a render in App.js). I have tried both class and className

<div className="container">
      <table className="table table-striped table-bordered table-hover table-condensed">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr class="danger">
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>24</td>
        </tr>
        <tr class="success">
          <td>John</td>
          <td>Doe</td>
          <td>34</td>
        </tr>
        <tr>
          <td>Stephanie</td>
          <td>Landon</td>
          <td>47</td>
        </tr>
        <tr>
          <td>Mike</td>
          <td>Johnson</td>
          <td>19</td>
        </tr>
      </table>
</div>

Thank you

Answer 1

It seems you are missing a "tbody" tag inside your table . Here is the correct markup:

<div className="container">
  <table className="table table-striped table-bordered table-hover table-condensed">
    <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr className="danger">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>24</td>
      </tr>
      <tr className="success">
        <td>John</td>
        <td>Doe</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Stephanie</td>
        <td>Landon</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Johnson</td>
        <td>19</td>
      </tr>
    </tbody>
  </table>
</div>

Hope it helps.