score:1

here's the basics of how i would go about it. use classes with properties instead of raw data objects. create properties for the calculated fields of a person. pass the objects to react components that know how to display the fields of the person nicely. a table component can create a row for each person, for example.

class person {
  constructor(properties) {
    object.assign(this, properties);
  }
  
  get pf() {
    return this.days * 12 / 100;
  }
  
  get esi() {
    return this.pf * 0.25;
  }
  
  get amtpayable() {
    return this.pf + this.esi + 100;
  }
}

let myrow = (props) => (
  <tr>
    <td>{props.item.name}</td>
    <td>{props.item.days}</td>
    <td>{props.item.pf}</td>
    <td>{props.item.esi}</td>
    <td>{props.item.amtpayable}</td>
  </tr>
);

let mytable = (props) => (
  <table>
    <tr>
      <th>name</th>
      <th>days</th>
      <th>pf</th>
      <th>esi</th>
      <th>amtpayable</th>
    </tr>
    {props.data.map(item => <myrow item={item} />)}
  </table>
);

const data = [
  new person({
    key: '1',
    name: 'jerry gold',
    days: 101
  }),
  new person({
    key: '2',
    name: 'arnold smith',
    days: 102
  }),
  new person({
    key: '3',
    name: 'baker',
    days: 103     
  })
];

// render it
reactdom.render(
  <mytable data={data} />,
  document.getelementbyid("react")
);
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

score:1

this question is quite broad, but after chat discussion, it sounds like you're unsure how to reduce duplication using hard-coded employee names that will eventually be retrieved from a database.

here is an example of using an employee array that populates a table and updates the pf, esi, and amount payable according to changes per employee days:

let employees = [ 'jerry gold', 'arnold smith', 'baker' ];

let tbody = document.getelementbyid('list');
let tbodyhtml = '';

employees.foreach(insertrow);
tbody.innerhtml = tbodyhtml;

function insertrow(employeename) {
  tbodyhtml += `
    <tr class="employee">
      <th scope="row" class="name" style="text-align: left">${employeename}</th>
      <td class="pf">--</td>
      <td class="esi">--</td>
      <td class="payable">--</td>
      <td class="days">
        <input type="number" min="0" onchange="updateemployeedata(this)">
      </td>
    </tr>
  `;
}

function updateemployeedata(anumberinput) {
  let days = parseint(anumberinput.value);
  let tr = anumberinput.parentnode.parentnode;

  let pf = days * 12 / 100;
  let esi = pf * 0.25;
  let payable = pf + esi + 100;

  const hundredths_place = 2;
  let payable_td = tr.queryselector('.payable');
  tr.queryselector('.pf').innerhtml = pf.tofixed(hundredths_place);
  tr.queryselector('.esi').innerhtml = esi.tofixed(hundredths_place);
  payable_td.innerhtml = '$' + payable.tofixed(hundredths_place);
  
  if (payable <= 100.15) {
    payable_td.dataset.range = 'low';
  } else if (payable > 100.15 && payable < 100.50) {
    payable_td.dataset.range = 'med';
  } else if (payable > 100.50) {
    payable_td.dataset.range = 'high';
  } else {
    delete payable_td.dataset.range;
  }
}
#employeetable tbody>tr:nth-child(odd) {
  background-color: lightgrey;
}

#employeetable th,
td {
  padding: 0.5em;
  text-align: center;
}

#employeetable th {
  text-transform: uppercase;
}

#employeetable caption {
  font-style: italic;
  color: grey;
}

#employeetable td.payable {
 transition: background-color 1s;
}

#employeetable td.payable[data-range="low"] {
  background-color: red;
}

#employeetable td.payable[data-range="med"] {
  background-color: yellow;
}

#employeetable td.payable[data-range="high"] {
  background-color: lightgreen;
}
<table id="employeetable">
    <colgroup class="name_col"></colgroup>
    <caption>employee data</caption>
    <thead>
        <tr>
            <th scope="col">name</th>
            <th scope="col">pf</th>
            <th scope="col">esi</th>
            <th scope="col">payable</th>
            <th scope="col">days</th>
        </tr>
    </thead>
    <tbody id="list">
    </tbody>
</table>


Related Query

More Query from same tag