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>
Source: stackoverflow.com
Related Query
- Logic or design pattern help required - react
- Need help in logic building for react table
- React Design Pattern with multiple Components
- Implementing State Pattern Design in React (Select tool to draw in canvas)
- React - Disable button in Ant Design form until all required fields are filled
- Is there a standard design pattern for viewing + editing a record in React / Material-UI?
- React design pattern dilemma - steppers in numeric form components
- At least one required prop in React
- What's useEffect execution order and its internal clean-up logic in react hooks?
- React Redux: Should reducers contain any logic
- Where do I put coding logic in my React Application
- React | Ant design select default value
- React conditional render pattern
- How can I repeat a pattern image to create a background in React Native?
- Design Redux actions and reducers for a React reusable component
- React native- Best way to create singleton pattern
- Using Material Design Lite with React
- Could not find a required file. Name: index.html in react with docker compose
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- React Ant Design styles not loading
- Using ref with React Hooks in Ant design (antd) Table component with customized filters
- React Component wait for required props to render
- Can't find modules required in React
- How to disable ripple in Material Design React
- React Warning: Failed Context Types: Required context `router` was not specified in `Component`
- What is the correct pattern in React JS to invoke a component method on specific props change?
- ant design v4 breaks react testing library tests for Select and Autocomplete
- Using the factory pattern with React
- React Testing Library (RTL): test a responsive design
- Where to place logic for loading initial server data in React app?
More Query from same tag
- Spread Operator for array of array
- Why does adding a memoized function in useEffect dependency array cause an error?
- Google analytics with react is not working
- mongoose-paginate with react and material-ui TablePagination - second page onwards not rendering after clicking of onChangePage prop
- InvalidSignatureException from POST request
- Cannot read properties of undefined with react-chartjs-2 and chart js problem
- Make pointer events bubble through overlapping grid items
- Autodesk Forge Viewer and React components
- ts(2322) Property children does not exist on type 'Intrinsic attributes and Props'
- setState callback not waiting state to update
- How to post data from CKEditor to json server in React
- In React, Is there a way to communicate between two components in both sides (duplex) using React Context API?
- How can I receive the async data as the resolved value?
- how can i fix concurrently issue running multiple scripts
- How can I access the React router's location prop?
- Angular 2+ , Router navigates to destinated route but wont load component
- In react with hooks, how do I loop through list and only get certain items?
- Close order depending of working hours using React hooks
- Expected to return a value at the end of this function array-callback-return in React JS
- npm install ->Failed at the node-sass@4.5.0 postinstall script
- how yo use an async method inside useEffect() hook
- Routes unable to load using react-router
- React localStorage issue
- ReferenceError: React is not defined in svg file
- Toggle component without changing state
- this.state in constructor call function synchronously
- Waiting for render events with Selenium and React
- How can I centralize proptypes which are not the same
- Redirect react subroutes with Nginx
- GeoJSON from API won't show with react-leaflet