Logic or design pattern help required - react












0















This is for a react project I am working on.
need help with table.
I have a table for employees where each row has a different employee and I input the days for each employee and the other values gets calculated based on the number of days. so, let's say pf, esi, amount payable gets calculated based on that.



Now, there is a way to do those calculations.
for each row we could setup different variables
like for row1, employee1, we could do
days1 and the pf1, esi1, amtPayable1 would get calculated accordingly
and then I could do the same for row2.
so it would be days2 and the pf2, esi2, amtPayable2 would get calculated accordingly.
but I dont think this is the best way to do this.
what if there are a 100 rows? would I create these variables 100 times?? and the code wont be dynamic anymore.



so, what is the best way to do this?



I havent written the full code yet, because I was going to write it like this but saw the problem with this approach and therefore am asking about the correct and better way to do this.



But still, people want to see some relevant code to better understand what I mean, so here's the relevant code
This code is for 3 rows i.e. 3 employees, which means I may have to create days100, pf100, esi100, amtPayable100 if there are a 100 employees.



this made me think that it was not the best way and therfore I thought there's got to be a better way.



anyways, here's the code



let days1 = e.target.value;

let pf1 = days1*(12/100);

let esi1 = pf1*0.25;

let amtPayable1 = pf1 + es1 + 100;



let days2 = e.target.value;

let pf2 = days2*(12/100);

let esi2 = pf2*0.25;

let amtPayable2 = pf2 + es2 + 100;



let days3 = e.target.value;

let pf3 = days3*(12/100);

let esi3 = pf3*0.25;

let amtPayable3 = pf3 + es3 + 100;


after getting the values for all the variables above, I will be using it as data for a different table.
something like this:



 const data = [{

            key: '1',

            name: 'Jerry gold',

            days: days1,            

            amtpayable:amtPayable1,           

            pf:pf1,

            esi:esi1,         



          }, {

            key: '2',

            name: 'Arnold Smith',

            days: days2,            

            amtpayable:amtPayable2,           

            pf:pf2,

            esi:esi2,         



          },

          {

            key: '3',

            name: 'Baker',

             days: days3,            

            amtpayable:amtPayable3,           

            pf:pf3,

            esi:esi3,     

          }

          ];


so, you see there is a lot of duplication going on here and I want a way to avoid that.



@Rafael , it's not an ajax call.
everything is getting calculated based on number of days.
so, someone, say the employer, inputs the number of days each employee was present and based on that input the other values are calculated and the data is provided to a different table.






javascript reactjs







share|improve this question

























  • To answer this question someone has to look into the relevant code which you already have so please share

    – Hemadri Dasari
    Jan 20 at 3:26













  • ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

    – faraz
    Jan 20 at 3:38











  • Why aren't you using a loop?

    – Rafael
    Jan 20 at 3:51











  • Show us the code where you are retrieving the employees from an AJAX call

    – Rafael
    Jan 20 at 3:54











  • well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

    – faraz
    Jan 20 at 3:54
















0















This is for a react project I am working on.
need help with table.
I have a table for employees where each row has a different employee and I input the days for each employee and the other values gets calculated based on the number of days. so, let's say pf, esi, amount payable gets calculated based on that.



Now, there is a way to do those calculations.
for each row we could setup different variables
like for row1, employee1, we could do
days1 and the pf1, esi1, amtPayable1 would get calculated accordingly
and then I could do the same for row2.
so it would be days2 and the pf2, esi2, amtPayable2 would get calculated accordingly.
but I dont think this is the best way to do this.
what if there are a 100 rows? would I create these variables 100 times?? and the code wont be dynamic anymore.



so, what is the best way to do this?



I havent written the full code yet, because I was going to write it like this but saw the problem with this approach and therefore am asking about the correct and better way to do this.



But still, people want to see some relevant code to better understand what I mean, so here's the relevant code
This code is for 3 rows i.e. 3 employees, which means I may have to create days100, pf100, esi100, amtPayable100 if there are a 100 employees.



this made me think that it was not the best way and therfore I thought there's got to be a better way.



anyways, here's the code



let days1 = e.target.value;

let pf1 = days1*(12/100);

let esi1 = pf1*0.25;

let amtPayable1 = pf1 + es1 + 100;



let days2 = e.target.value;

let pf2 = days2*(12/100);

let esi2 = pf2*0.25;

let amtPayable2 = pf2 + es2 + 100;



let days3 = e.target.value;

let pf3 = days3*(12/100);

let esi3 = pf3*0.25;

let amtPayable3 = pf3 + es3 + 100;


after getting the values for all the variables above, I will be using it as data for a different table.
something like this:



 const data = [{

            key: '1',

            name: 'Jerry gold',

            days: days1,            

            amtpayable:amtPayable1,           

            pf:pf1,

            esi:esi1,         



          }, {

            key: '2',

            name: 'Arnold Smith',

            days: days2,            

            amtpayable:amtPayable2,           

            pf:pf2,

            esi:esi2,         



          },

          {

            key: '3',

            name: 'Baker',

             days: days3,            

            amtpayable:amtPayable3,           

            pf:pf3,

            esi:esi3,     

          }

          ];


so, you see there is a lot of duplication going on here and I want a way to avoid that.



@Rafael , it's not an ajax call.
everything is getting calculated based on number of days.
so, someone, say the employer, inputs the number of days each employee was present and based on that input the other values are calculated and the data is provided to a different table.






javascript reactjs







share|improve this question

























  • To answer this question someone has to look into the relevant code which you already have so please share

    – Hemadri Dasari
    Jan 20 at 3:26













  • ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

    – faraz
    Jan 20 at 3:38











  • Why aren't you using a loop?

    – Rafael
    Jan 20 at 3:51











  • Show us the code where you are retrieving the employees from an AJAX call

    – Rafael
    Jan 20 at 3:54











  • well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

    – faraz
    Jan 20 at 3:54














0












0








0








This is for a react project I am working on.
need help with table.
I have a table for employees where each row has a different employee and I input the days for each employee and the other values gets calculated based on the number of days. so, let's say pf, esi, amount payable gets calculated based on that.



Now, there is a way to do those calculations.
for each row we could setup different variables
like for row1, employee1, we could do
days1 and the pf1, esi1, amtPayable1 would get calculated accordingly
and then I could do the same for row2.
so it would be days2 and the pf2, esi2, amtPayable2 would get calculated accordingly.
but I dont think this is the best way to do this.
what if there are a 100 rows? would I create these variables 100 times?? and the code wont be dynamic anymore.



so, what is the best way to do this?



I havent written the full code yet, because I was going to write it like this but saw the problem with this approach and therefore am asking about the correct and better way to do this.



But still, people want to see some relevant code to better understand what I mean, so here's the relevant code
This code is for 3 rows i.e. 3 employees, which means I may have to create days100, pf100, esi100, amtPayable100 if there are a 100 employees.



this made me think that it was not the best way and therfore I thought there's got to be a better way.



anyways, here's the code



let days1 = e.target.value;

let pf1 = days1*(12/100);

let esi1 = pf1*0.25;

let amtPayable1 = pf1 + es1 + 100;



let days2 = e.target.value;

let pf2 = days2*(12/100);

let esi2 = pf2*0.25;

let amtPayable2 = pf2 + es2 + 100;



let days3 = e.target.value;

let pf3 = days3*(12/100);

let esi3 = pf3*0.25;

let amtPayable3 = pf3 + es3 + 100;


after getting the values for all the variables above, I will be using it as data for a different table.
something like this:



 const data = [{

            key: '1',

            name: 'Jerry gold',

            days: days1,            

            amtpayable:amtPayable1,           

            pf:pf1,

            esi:esi1,         



          }, {

            key: '2',

            name: 'Arnold Smith',

            days: days2,            

            amtpayable:amtPayable2,           

            pf:pf2,

            esi:esi2,         



          },

          {

            key: '3',

            name: 'Baker',

             days: days3,            

            amtpayable:amtPayable3,           

            pf:pf3,

            esi:esi3,     

          }

          ];


so, you see there is a lot of duplication going on here and I want a way to avoid that.



@Rafael , it's not an ajax call.
everything is getting calculated based on number of days.
so, someone, say the employer, inputs the number of days each employee was present and based on that input the other values are calculated and the data is provided to a different table.






javascript reactjs







share|improve this question
















This is for a react project I am working on.
need help with table.
I have a table for employees where each row has a different employee and I input the days for each employee and the other values gets calculated based on the number of days. so, let's say pf, esi, amount payable gets calculated based on that.



Now, there is a way to do those calculations.
for each row we could setup different variables
like for row1, employee1, we could do
days1 and the pf1, esi1, amtPayable1 would get calculated accordingly
and then I could do the same for row2.
so it would be days2 and the pf2, esi2, amtPayable2 would get calculated accordingly.
but I dont think this is the best way to do this.
what if there are a 100 rows? would I create these variables 100 times?? and the code wont be dynamic anymore.



so, what is the best way to do this?



I havent written the full code yet, because I was going to write it like this but saw the problem with this approach and therefore am asking about the correct and better way to do this.



But still, people want to see some relevant code to better understand what I mean, so here's the relevant code
This code is for 3 rows i.e. 3 employees, which means I may have to create days100, pf100, esi100, amtPayable100 if there are a 100 employees.



this made me think that it was not the best way and therfore I thought there's got to be a better way.



anyways, here's the code



let days1 = e.target.value;

let pf1 = days1*(12/100);

let esi1 = pf1*0.25;

let amtPayable1 = pf1 + es1 + 100;



let days2 = e.target.value;

let pf2 = days2*(12/100);

let esi2 = pf2*0.25;

let amtPayable2 = pf2 + es2 + 100;



let days3 = e.target.value;

let pf3 = days3*(12/100);

let esi3 = pf3*0.25;

let amtPayable3 = pf3 + es3 + 100;


after getting the values for all the variables above, I will be using it as data for a different table.
something like this:



 const data = [{

            key: '1',

            name: 'Jerry gold',

            days: days1,            

            amtpayable:amtPayable1,           

            pf:pf1,

            esi:esi1,         



          }, {

            key: '2',

            name: 'Arnold Smith',

            days: days2,            

            amtpayable:amtPayable2,           

            pf:pf2,

            esi:esi2,         



          },

          {

            key: '3',

            name: 'Baker',

             days: days3,            

            amtpayable:amtPayable3,           

            pf:pf3,

            esi:esi3,     

          }

          ];


so, you see there is a lot of duplication going on here and I want a way to avoid that.



@Rafael , it's not an ajax call.
everything is getting calculated based on number of days.
so, someone, say the employer, inputs the number of days each employee was present and based on that input the other values are calculated and the data is provided to a different table.






javascript reactjs




javascript reactjs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 20 at 3:56







faraz

















asked Jan 20 at 3:19









farazfaraz

60031330




60031330













  • To answer this question someone has to look into the relevant code which you already have so please share

    – Hemadri Dasari
    Jan 20 at 3:26













  • ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

    – faraz
    Jan 20 at 3:38











  • Why aren't you using a loop?

    – Rafael
    Jan 20 at 3:51











  • Show us the code where you are retrieving the employees from an AJAX call

    – Rafael
    Jan 20 at 3:54











  • well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

    – faraz
    Jan 20 at 3:54



















  • To answer this question someone has to look into the relevant code which you already have so please share

    – Hemadri Dasari
    Jan 20 at 3:26













  • ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

    – faraz
    Jan 20 at 3:38











  • Why aren't you using a loop?

    – Rafael
    Jan 20 at 3:51











  • Show us the code where you are retrieving the employees from an AJAX call

    – Rafael
    Jan 20 at 3:54











  • well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

    – faraz
    Jan 20 at 3:54

















To answer this question someone has to look into the relevant code which you already have so please share

– Hemadri Dasari
Jan 20 at 3:26







To answer this question someone has to look into the relevant code which you already have so please share

– Hemadri Dasari
Jan 20 at 3:26















ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

– faraz
Jan 20 at 3:38





ok, actually, I was going to write the code, but got stuck here because I saw the problem with my approach. but still, I have shared the relevant code in the original post, so you can see the approach I was thinking about and why I thought it was wrong. And therefore I came here to ask for a better way to do this.

– faraz
Jan 20 at 3:38













Why aren't you using a loop?

– Rafael
Jan 20 at 3:51





Why aren't you using a loop?

– Rafael
Jan 20 at 3:51













Show us the code where you are retrieving the employees from an AJAX call

– Rafael
Jan 20 at 3:54





Show us the code where you are retrieving the employees from an AJAX call

– Rafael
Jan 20 at 3:54













well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

– faraz
Jan 20 at 3:54





well, because I would need that data to provide it to a different table. I have updated my original post to show the data I need for the 2nd table. It might give you an idea. I was not using loop because I needed it to create the data variable which will be used for a different table. I think I am just missing something. maybe something really simple which I am overllooking. would love your suggestions

– faraz
Jan 20 at 3:54












2 Answers
2






active

oldest

votes


















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>








share|improve this answer
























  • Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

    – faraz
    Jan 20 at 5:46











  • If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

    – Wyck
    Jan 20 at 14:42



















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>








share|improve this answer


























  • Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

    – faraz
    Jan 20 at 5:45











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54273312%2flogic-or-design-pattern-help-required-react%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









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>








share|improve this answer
























  • Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

    – faraz
    Jan 20 at 5:46











  • If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

    – Wyck
    Jan 20 at 14:42
















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>








share|improve this answer
























  • Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

    – faraz
    Jan 20 at 5:46











  • If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

    – Wyck
    Jan 20 at 14:42














1












1








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>








share|improve this answer













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>








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>





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>






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 20 at 4:27









WyckWyck

1,57411624




1,57411624













  • Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

    – faraz
    Jan 20 at 5:46











  • If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

    – Wyck
    Jan 20 at 14:42



















  • Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

    – faraz
    Jan 20 at 5:46











  • If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

    – Wyck
    Jan 20 at 14:42

















Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

– faraz
Jan 20 at 5:46





Thanks , I was looking for something like this. not sure how to apply it for my situation though. I guess I will need to use typescript with react in order to use this kind of thing.

– faraz
Jan 20 at 5:46













If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

– Wyck
Jan 20 at 14:42





If you provide more information about your situation, I bet I (and others) could be more helpful. Can you describe any specific differences between what I provided and what you were expecting that make it difficult for you to apply to your situation?

– Wyck
Jan 20 at 14:42













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>








share|improve this answer


























  • Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

    – faraz
    Jan 20 at 5:45
















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>








share|improve this answer


























  • Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

    – faraz
    Jan 20 at 5:45














1












1








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>








share|improve this answer















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>








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>





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>






share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 20 at 5:46

























answered Jan 20 at 5:10









RafaelRafael

4,786102138




4,786102138













  • Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

    – faraz
    Jan 20 at 5:45



















  • Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

    – faraz
    Jan 20 at 5:45

















Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

– faraz
Jan 20 at 5:45





Thanks, I am not sure if this is the exact solution, but this really helps a lot. I am actually setting up a database now as it seems that it is the best way to proceed. Thanks

– faraz
Jan 20 at 5:45


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54273312%2flogic-or-design-pattern-help-required-react%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Callistus III

Image
Callistus III Res apud Vicidata repertae: Nativitas : 8 Ianuarii 1379 ; Canals Obitus : 15 Augusti 1458 ; Roma Patria : Corona Aragoniae Nomen nativum : Alonso de Borja i Llançol Pontificatus 1455 - 1458 Praecessor : Nicolaus V Successor : Pius II Insignia heraldica Callistus III (natus Alphonsus de Borgia Hispanice Alonso de Borja y Borja , Italiane Alfonso Borgia , die 31 Decembris 1378 Saetabis Augustae in Hispania apud Valentiam - obiit die 6 Augusti 1458), papa catholicus episcopus Romanus a die 8 Aprilis 1455 erat. Vita | Alphonsus de Borgia studuit iuri canonico Ilerdae. Postea iuris consultus antipapae Benedicti XIII et regis Alphonsi V Aragoniae fit. Anno 1444 episcopus Valentiae factus est. Anno 1444 a papa Eugenio IV Cardinalis Sanctae Romanae Ecclesiae creatus est. Bibliographia | Friedrich Wilhelm Bautz, "CALIXT III., Papst" in Biographisch-Bibliographisches Kirchenlexikon  vol. 1 (Hammonae, 1975; reimpr. 1990. ISBN 3-88...
Read more

Ostreoida

Image
Ostreoida Taxinomia Regnum: Animalia Phylum: Mollusca Classis: Bivalvia Subclassis: Pteriomorphia Ordo: Ostreoida Familiae Anomiidae Dimyidae Entoliidae Gryphaeidae Ostreidae Pectinidae Placunidae Plicatulidae Propeamussiidae Spondylidae Syncyclonemidae Interiores valvium partes fossilis Spondyli ex Pliocaeno Cypri. Ostreoida sunt ordo phyli Molluscorum qui ostreidas et nonnullas bivalvium familias propinquas comprehendit. Circa undecim familiae intra ordinem agnoscuntur, sed subordines, superfamiliae, et subfamiliae multo in ordine adhibentur. Classificatio sequens est synthesis iudiciorum variorum, quam plurimo posse accommodatorum. Indices generum sunt exemplarii, ? potius absoluti. Sunt in hoc ordine paene centum genera. Superfamiliae, familiae, et gravia genera | Subordo Pectinina Superfamilia Pectinoidea Familia Entoliidae (quinque genera) Genus Pectinella Familia Pectinidae (49 genera in ...
Read more

Plistias Cous

Plistias Cous (Graece Πλειστίας ), qui saeculo IV a.C.n. exeunte floruit, insulae Coi incola, fuit anno 306 a.C.n. pro Demetrio Poliorceta dux classium. Ille enim navigator principalis fuit classis omnis; ille una cum Hegesippo Halicarnassensi in proelio iuxta Salaminem Cypri commisso praefuit alae dextrae. Fontes | Diodorus Siculus, Bibliotheca historica 20.50.4 Bibliographia | "Prosopography of Antigonos's Friends and Subordinates" in Richard A. Billows, Antigonos the One-Eyed and the Creation of the Hellenistic State (Berkeley: University of California Press, 1990) no. 98, p. 425 H. Hauben, Het vlootbevelhebberschap in de vroege Diadochen tijd (Bruxellis, 1975) pp. 78, 117-119 T. Lenschau, "Pleistias" in Paulys Real-Enzyklopädie der classischen Altertumswissenschaft edd. G. Wissowa et alii (Stuttgart, 1893-1972 ~ ~) This page is only for reference, If you need detailed information, please check here
Read more