score:0
Accepted answer
you must use an array and save your data into that array:
import { usestate } from "react";
import table from "react-bootstrap/table";
const rowdata = {
injection_speed: "",
fill_time: "",
peak_inj_press: "",
viscosity: "",
shear_rate: "",
absolute_drop_viscosity: ""
};
const app = () => {
const [row, setrow] = usestate();
const [allrowsadded, updateallrows] = usestate(0);
const [viscosity, setviscosity] = usestate([]);
const [intensificationratio, setintensificationratio] = usestate(1)
const [editformdata, seteditformdata] = usestate([rowdata])
const [isrowid, setisrowid] = usestate(null)
const handleeditformchange = (event, fieldname, index) => {
event.preventdefault();
const fieldvalue = event.target.value;
seteditformdata(prevstate => {
const newstate = [...prevstate];
newstate[index][fieldname] = fieldvalue;
return newstate;
})
}
const handleeditformsubmit = (event) => {
event.preventdefault();
seteditformdata(prevstate => {
const newstate = [...prevstate];
newstate.map(item => {
let viscosity = item['fill_time'] * item['peak_inj_press'] * intensificationratio;
viscosity = isnan(math.round(viscosity)) ? '-' : math.round(viscosity)
let shearrate = 1 / item['fill_time'];
shearrate = isnan(number(shearrate).tofixed(3)) ? '-' : number(shearrate).tofixed(3)
item.viscosity = viscosity;
item.shear_rate = shearrate;
})
return newstate;
});
}
const addrow = (e) => {
e.preventdefault();
setrow(e.target.value);
};
const increaserow = () => {
seteditformdata(prevstate => {
const newstate = [...prevstate];
for (let i = 0; i < parseint(row); i++) {
newstate.push(rowdata);
}
return newstate;
})
};
const deleterow = (key) => {
seteditformdata(prevstate => {
const newstate = prevstate.splice(key, 1);
return newstate;
})
};
const demo = (id) => {
setisrowid(id)
}
return (
<>
<div>
<form>
<input type="text" onchange={addrow} placeholder="enter number of row's" /><br />
<input type="text" onchange={(e) => setintensificationratio(e.target.value)} placeholder="enter intensification ratio" />
</form>
<button onclick={increaserow}> add </button>
</div>
<div classname="container">
<form onsubmit={handleeditformsubmit} >
<table striped bordered hover responsive variant="light">
<thead>
<tr>
<th>
{" "}
<h6> injection speed </h6>{" "}
</th>
<th>
{" "}
<h6> fill time </h6>{" "}
</th>
<th>
{" "}
<h6> peak inj press </h6>{" "}
</th>
<th>
{" "}
<h6> viscocity </h6>{" "}
</th>
<th>
{" "}
<h6> shear rate </h6>{" "}
</th>
<th>
{" "}
<h6> absolutedropviscocity </h6>{" "}
</th>
<th>
{" "}
<h6> %dropviscocity </h6>{" "}
</th>
<th>
{" "}
<h6> action </h6>{" "}
</th>
</tr>
</thead>
<tbody classname="grid_style">
{editformdata.map((element, rowid) => {
return (
<tr key={rowid}>
<td> <input type='text' classname="form-control" defaultvalue={element.injection_speed} onchange={e => handleeditformchange(e, 'injection_speed',rowid)} onclick={() => demo(rowid)} /> </td>
<td> <input type='text' classname="form-control" defaultvalue={element.fill_time} onchange={e => handleeditformchange(e,'fill_time',rowid)} onclick={() => demo(rowid)}/></td>
<td><input type='text' classname="form-control" defaultvalue={element.peak_inj_press} onchange={e => handleeditformchange(e, 'peak_inj_press',rowid)} onclick={() => demo(rowid)}/> </td>
<td> <input type='text' classname="form-control" value={element.viscosity } onchange={e => handleeditformchange(e,rowid)} onclick={() => demo(rowid)} readonly/> </td>
<td> <input type='text' classname="form-control" value={element.shear_rate} readonly /> </td>
<td> <input type='text' classname="form-control" readonly /></td>
<td> <input type='text' classname="form-control" readonly /></td>
<td> <i classname="fa fa-trash viscocity_icons" onclick={() => deleterow(element, rowid)}></i> </td>
</tr>
)
})}
</tbody>
</table>
<button type="submit"> calculate </button>
</form>
</div>
</>
);
};
export default app;
Source: stackoverflow.com
Related Query
- Trying to Calculate value in table row react.js
- Trying to get data of the row clicked of the table react js
- Retrieve row value selected in a Table as an array and send the results to another function on React
- Trying to change the value of an item in a table using onclick event in react
- React - Triggering click event on table row
- CSS for colouring one row of antd table in react
- Need to navigate link while clicking material ui table row in React Router 4
- How to get React Table Row Data Onclick
- Trigger cell onClick instead of row onClick in React Table
- Trying to get a React controlled input to have a default value
- React material ui table can't get element from row
- Trying to Animate React Native Text Value
- Want dynamically add table row in react js
- Using different font size in each row in antd react table
- React - appending an empty row to a table
- Distinguish row clicks in Antd (ant design) table React component
- Remove a specific table row on onClick event in React component
- Adding a Table Row into a Table in React
- How to change the selected table row background color with React
- React Redux table update row
- How to change the selected table row background using Material-UI on React
- onClick event - change data for a single row in react table
- Make only one row selectable at a time in React Table 7.1.0
- Calculate age from date of birth user input value in react
- React Hooks: Is there a way to calculate state values based on another state value
- How to change/add value of a certain row of an array using useState Hook in React
- Semantic UI React - Table - Make whole row selectable and link somewhere
- Navigate to next page on Table row click in React JS
- how to calculate default value for react js state hook with a function?
- React Material-UI How can I add a checkbox which is separate from table row click
More Query from same tag
- Cannot seem to use a JavaScript variable in require for dynamic import in React
- FilePond Plugin Import Error - Could not find a declaration file for '...'
- ReactJS onChange inputfield while typing?
- ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed
- How to change th value of a state property?
- How to set prop data for chart.js in React?
- Optionally pass parameter to function being passed around
- reactJs setState change property on object within an array
- This expression is not callable. Type 'Thunk<Collections, undefined, any, {}, any>' has no call signatures
- Jest fails to load moment
- Does order of state variable matters in React?
- Dynamically creating array of components
- unsolved: change state with ant design select
- Navigate a React App link to Express server dynamically
- Calling a tabulator table function in React
- Cannot read property of undefined with array.map
- How to add data to charts.js in react
- Manipulating DOM in componentDidMount() without setTimeout
- How to use <Link /> component inside dangerouslySetInnerHTML
- Why react-bootstrap text-center didn't work ? and why my HR auto center itself if i change the width?
- Converting functional component to class component
- React Router shows blank page until refresh
- React - Element type is invalid: expected a string or a class/function but got: object
- Ace editor. Set current edits state as base
- React-table: how to use getCellProps, getHeaderProps etc.?
- Get React.refs DOM node width after render and trigger a re-render only if width has value has changed
- Check if a function is created by useCallback?
- Laravel & React | How to implement one view per one component?
- SVG image shows weird shadows after compiled by React.js
- How to Make Navigation bar on top of carousel?