JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="MyApp" />

React

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fundTable: [
        { FundId: '11281 - A', FundName: 'Legal & General Multi-Manager Balanced Trust' },
        { FundId: '11281 - B', FundName: 'Legal & General XXXXXXXX XXXXXXXX' },
        { FundId: '11281 - C', FundName: 'Legal & General XXXXXXXX XXXXXXXX' }
      ],
      showFundAccordian: {}
    };
  }

  toggleFundAccordian = fundIndex => {
    this.setState({ showFundAccordian: { ...this.state.showFundAccordian, [fundIndex]: !this.state.showFundAccordian[fundIndex] } });
  }
  render() {

    const { showFundAccordian } = this.state;

    return (
      <div>
        <table className="table tradingAccountsTable">
          <thead>
            <tr>
              <th>FUND</th>
              <th>FUND NAME</th>
              <th>AGR.</th>
              <th>PRODUCT</th>
              <th>BROKER ACCOUNT</th>
              <th>EFFECTIVE DATE</th>
              <th>EXPIRATION DATE</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colSpan="7"></td>
            </tr>
            <tr>
              <td colSpan="7" className="padding0">
                <table className="table tradingAccountsTable1">
                  {
                    fundTable && fundTable.map((fund, fundIndex) => (
                      <tbody key={fundIndex}>
                        <tr className="rowBlue">
                          <td>{fund.FundId}</td>
                          <td>{fund.FundName} <div className="right"><span onClick={() => this.toggleFundAccordian(fundIndex)} className={`changeArrow ${showFundAccordian ? 'fa fa-angle-down' : 'fa fa-angle-right'}`} /></div></td>
                        </tr>
                        {
                          showFundAccordian[fundIndex] &&
                            <tr>
                              <td colSpan="7">
                                <Col md={12} sm={12} xs={12}>
             ...