score:2
Accepted answer
You need to append the inputObject to the sendTransferObj array in the current state instead of appending it to a new empty array (which will cause the overwriting). You can do this using the spread syntax
handleChange(transId: string, event: React.ChangeEvent<HTMLInputElement>) {
let inputObject = [{ id: transId, value: event.target.value }]
const index = inputObject.findIndex(inputObject => inputObject.id != transId)
this.setState({
...this.state,
sendTransferObj: index === -1 ? [
...this.state.sendTransferObj,
inputObject
] : this.state.sendTransferObj
});
}
This won't update the field when the inputObject
is found, though. I would recommend storing the values in an object with the ID as keys instead (and formatting it into the desired format when requesting the API). This way, you don't have to iterate through the array to find the matching object.
constructor(props: Props) {
super(props);
this.state = {
sendTransferObj: {}
};
this.handleChange = this.handleChange.bind(this);
}
...
handleChange(transId: string, event: React.ChangeEvent<HTMLInputElement>) {
this.setState({
...this.state,
sendTransferObj: {
...sendTransferObj,
[transId]: event.target.value
}
});
}
Source: stackoverflow.com
Related Query
- Add value from inputs to array if not exists
- Add value from input into array is not working in React
- How to add className to list from map array depending on object value
- array.filter not removing value from array
- State not updating on removing value from array in React JSX funcntional component
- How can you check if there is an existing value in the array and not add it another time if so?
- How to consecutively add values from one array to another and store the value in a new array in javascript?
- How to check if a value already exists in an array and remove that from array in react js?
- Add and delete value from an array in react dynamically
- Check if object of any array exist in an another array, if not exists then push onto another array , or else remove it from another array
- removing value from array not working NEXT.JS
- Get value from array couses "Property 'value' does not exist on type"
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- multiply 2 value from each array of objects then add the multiplied numbers to get a total number in Reactjs/Javascript
- React JS, Error is not defined no-undef when attempting to obtain first value from array
- I am trying to store value of JSON data in an array from servlet but it shows posts.map is not function
- Add value from nested array into div classname
- Add in array elements with index from multiple inputs
- What is the best way to add a value to an array in state
- Component not re rendering when value from useContext is updated
- Value for title can not be cast from ReadablenativeMap to string
- Form Validation using Yup to check whether inputs value is equal or not
- Why is child component not receiving updated value from parent in React Native?
- Passing array value from one class to another
- TextField default value from parent not rendering on child
- Recharts XAxis is not showing the date value from tickFormatter
- Populate react select options array with key value pairs from firebase collection
- React checkbox if checked add value to array
- How to get value from Multiple Checkbox to array in react?
- ReactJS: replacing object from array with new value replaces whole array
More Query from same tag
- what is @ in react HOC?
- react-router not waiting for animation before changing route
- How can I show edit button in column cell while hovering over table row in Material UI Table?
- How to test style for a React component attribute with Enzyme
- React Materials-UI disable a button in a handler
- Is it safe to check object reference in componentWillReceiveProps?
- How to add ReactDom to global namespace in Meteor
- componentWillUpdate is deprecated in React, how can I replace it?
- React is setstate messing up my algorithm?
- Not able to use props to query API in react js
- How to filter the same id as the URL Params?
- How to add multiple onClick function on a button in ReactJS
- ReactJS show modal popup form on specified keystroke
- React Error Handling - why does the app crash?
- Confused about hosting a dynamic app with custom api with express
- I am not able to call a query to my database. I am assuming it is not properly connected
- Set PlaceHolder color of a textarea dynamically in React
- unble to store data in store using context hooks
- Autofocus TextField using React Material-UI
- Commonly API call for different components in ReactJS Fetch
- how to translate string in a component using react-i18next?
- ReactJS Fetch Called Once But Multiple Requests Go Out
- ReactJS - How can I implement pagination for react with keep state when route change?
- React how to store props inside state
- What is the best way for passing multiple children?
- Why is my splice deleting all but the first instead of only the one specified?
- Jest/Enzyme: Error: Uncaught [TypeError: Cannot read property 'query' of undefined] on component wrapped in withRouter
- Recreate Ant Design Pro like Sider/Drawer in Antd React App
- How to pass in the state to the dispatch action if using useState instead of this.state in react?
- Show loading spinner