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;

https://codesandbox.io/s/cold-field-8ktxz?file=/src/app.js


Related Query

More Query from same tag