score:1

Accepted answer

you are using the same single states inputarrival and inputburst for every row entry of data in the table. update so each is an array of strings, and update the changearrival and changeburst callbacks to curry an index to update. use the mapped index to access the correct state and pass to the onchange callbacks.

const entrytable = (props) => {
  const entry = props.numofentries;
  const [inputarrival, setinputarrival] = usestate(array(entry).fill(""));
  const [inputburst, setinputburst] = usestate(array(entry).fill(""));

  function changearrival(index) {
    return (e) => {
      console.log(e.target.value + "a");
      setinputarrival((values) =>
        values.map((value, i) => (i === index ? e.target.value : value))
      );
    };
  }
  function changeburst(index) {
    return (e) => {
      console.log(e.target.value + "b");
      setinputburst((values) =>
        values.map((value, i) => (i === index ? e.target.value : value))
      );
    };
  }

  // console.log(entry);
  const arrayentry = array.from({ length: entry}).map((_, i) => (
    <tr key={i}>
        <td classname="row_editcontent">p{i}</td>
        <td classname="row_editcontent">
          <input
            classname="input_edit"
            placeholder="0"
            type="number"
            value={inputarrival[i]}
            onchange={changearrival(i)}
          />
          ms
        </td>
        <td classname="row_editcontent">
          <input
            classname="input_edit"
            placeholder="0"
            type="number"
            value={inputburst[i]}
            onchange={changeburst(i)}
          />
          ms
        </td>
      </tr>
  ));

  return (
    <div>
      <table classname="maintablecontainer">
        <thead>
          <tr>
            <th classname="row_editheading">process</th>
            <th classname="row_editheading">arrival time</th>
            <th classname="row_editheading">burst time</th>
          </tr>
        </thead>
        <tbody>{arrayentry}</tbody>
      </table>
    </div>
  );
};

edit why-is-input-type-number-value-var-name-replacing-all-the-values-in-a-tabl


Related Query

More Query from same tag