Benefits.jsx

import React from 'react'
import { connect } from 'react-redux';
import { setData } from '../../actions/schemeActions';

const Benefits = () => {
  return (
    <>
    <div className='categories-table'>
        <table>
            <thead>
             <tr>
              <th>Categories</th>
            </tr>
            </thead>

            <tbody>

            <tr>
            <td>Category A</td>
            </tr>

            <tr>
            <td>Category B</td>
            </tr>

            <tr>
            <td>Category C</td>
            </tr>


            </tbody>
        </table>

{/* End of Table 1 */}
        <table>
        <thead>
          <tr>
            <th>Category Benefits</th>
            <th>Eligble Dependants</th>
          </tr>
        </thead>

        <tbody>
            <tr>
                <td>Outpatient</td>
                <td></td>
            </tr>
            <tr>
                <td>Inpatient</td>
                <td></td>
            </tr>
            <tr>
                <td>Optical</td>
                <td></td>
            </tr>
            <tr>
                <td>Dental</td>
                <td></td>
            </tr>
        </tbody>
        </table>
        </div>
{/* End of Table 2 */}

<table>
            <thead>
             <tr>
              <th>Category Providers</th>
            </tr>
            </thead>

            <tbody>

            <tr>
            <td>Category A</td>
            </tr>

            <tr>
            <td>Category B</td>
            </tr>

            <tr>
            <td>Category C</td>
            </tr>


            </tbody>
        </table>

{/* End of Table 3 */}
<table>
            <thead>
             <tr>
              <th>Category Exclusions</th>
            </tr>
            </thead>

            <tbody>

            <tr>
            <td>Category A</td>
            </tr>

            <tr>
            <td>Category B</td>
            </tr>

            <tr>
            <td>Category C</td>
            </tr>


            </tbody>
        </table>
        {/* End of Table 4 */}
    </>



  )
}

const mapStateToProps = (state) => ({
  data: state.scheme.data,
});

const mapDispatchToProps = {
  setData,
};

export default connect(mapStateToProps, mapDispatchToProps)(Benefits)