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>
);
};
Source: stackoverflow.com
Related Query
- Why is <input type='number' value={var_name}> replacing all the values in a table?
- How can I get the values of all sibling input checkboxes in a child component?
- How to get all the values from input fields using ReactJS?
- Get all values table row input boxes
- Why can I render all of the Pokémon's names using map, but get a TypeError trying to render one name by itself?
- When toggle divs why the input values stays
- Why is the input type "date" value not updating new values from the input
- Why I don't see all the keys and values of an object when its keys are long strings?
- In React ES6, why does the input field lose focus after typing a character?
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- Why does the Airbnb style guide say that relying on function name inference is discouraged?
- DefaultValues of react-hook-form is not setting the values to the Input fields in React JS
- Unable to get the name of the input when using getByRole while testing with testing-library
- If 'React' is the default export from 'react', Why can't we use some other name instead of 'React'
- React + Redux - Why not connect all the components?
- Chrome Dev Tools Shows all useState hooks with the name 'State'
- Don't refresh the input values on component change
- in redux-form, how to restrict the values of the input to a range?
- Why is it not possible to have the same name of two StaticQuery elements on two different layouts for Gatsby?
- Why won't my controlled Input component in React update with the state?
- Why is my react Table not updating the data?
- Why does the name of the state object not need to match the name in setState?
- Updating one of the Formik initial values with state resets all other values
- React: Why the count values are different in useEffect and inc event handler?
- Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
- Want to populate the input values based on the click of an object inside map(): React+Typescript
- Why the input doesnt work when generated by React
- redux-form get the name of form for the input
- Reactjs Redux updating data values from the state/store with an input
More Query from same tag
- Import SVGs from GraphQL query in React (Gatsby)
- What is meant by "Data not originating from the state will never be drafted" in immer
- How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0
- Not finding the next correct date(s)
- Value not updating for Input inside ANTD Form.Item
- Difference between <Component /> and Component()
- is useCallback a performance boost for the react app?
- Is there any way I can use isMulti without it deleting choices I've already picked? In otherwords, having duplicate/repeated selected options?
- Is there a way adding Freshworks chat widget to a website built on Gatsby?
- i18next works on dev server but not in azure app-service
- How do I make my React Components to be responsive via css media queries?
- Accessing filtered object values from props (JS/React)
- How do I get the result from login action to check in another component Menu after login success
- How to handle multiple controlled inputs with react es6?
- The operation 'FooQuery' wrapping 'Foo' is expecting a variable, but it was not found with react-apollo
- Return matching item from within nested array of objects
- How to Apply Month Filter To Table React
- ReactJs Lazy loading with conditional
- submit form in react with variable set of inputs?
- The state variable returned after using useState react hook shows .map is not a function
- React ref a nested component
- Unhandled Rejection (TypeError): this.props.callbackFunction is not a function
- Dropdown button react pass json ID into HREF
- export function inside react component or access state in same file outside of component
- Using map on array of objects results in a errormessage
- React Hook does not work properly on the first render in gatsby production mode
- Rending elements based on Promises in React (Firebase Storage)
- Efficient way to delete key of object in nested arrays
- Passing multiple props to React component
- What is this JavaScript ES6 syntax?