I have an array of objects
const array = [
{ itemId: "optionOne", name: "Option One", quantity: 10 },
{ itemId: "optionTwo", name: "Option Two", quantity: 20 },
{ itemId: "optionThree", name: "Option Three", quantity: 30 }
];
I need to update just the quantities using input box and then update state.
end with something like this
whats the best way to do this.
PLEASE find attached code example ready to modify handleChange() function CodeSandbox
If you want to store and update state, you need to add your data to the component state. This can be done in the constructor, and then modified using setState() in any of your component methods (i.e. if you are getting the data from an API, or modifying with your change handler). The component would look something like this:
constructor(props) {
super(props);
// set initial state, set to { array: [] } if getting data from API
this.state = {
array: [
{ itemId: "optionOne", name: "Option One", quantity: 10 },
{ itemId: "optionTwo", name: "Option Two", quantity: 20 },
{ itemId: "optionThree", name: "Option Three", quantity: 30 }
]
};
}
handleChange = (itemIndex, itemValue) => {
console.log(itemIndex, itemValue);
// set state to changed values
this.setState({
array: this.state.array.map((item, index) => {
// update item quantity (or clone & mutate if you need to maintain immutability)
if (index === itemIndex) { item.quantity = +itemValue };
return item;
})
});
};
render() {
return (
<div>
{this.state.array.map((item, key) => {
return (
<FormGroup controlId="siteVisit">
<Row>
<Col xs={12} md={4}>
<h3>{item.name}</h3>
</Col>
<Col xs={12} md={8}>
<FormControl
type="text"
key={item.itemId}
onChange={item => {
this.handleChange(key, item.target.value);
}}
/>
<span>{item.quantity}</span>
</Col>
</Row>
</FormGroup>
);
})}
</div>
);
}
While the above solution is relatively simple, depending on your app structure, it might make more sense to use an "event emitter"-like function that you pass through that gets called instead. That way, there is no need to store or update state inside your child component - it becomes stateless and purely presentational. All of the data mutations/updates will happen on the parent and simply be passed down to the child for display. The main reason for wanting to do this is if the data changes and new data gets sent down from the parent. If you're not listening/reacting to changes in the child props, those changes will never trigger updates to your child component unless you explicitly listen for the changes, in which case, you're duplicating code. Anyway, might be overkill for this simple example, but it's something worth thinking about.
this.state.array? Or do you want to filter another list based on the values of a given item in this.state.array? Or do you want to strip off all properties of the items in this.state.array except itemId and quantity for sending with post request? Can you please clarify?strip off all properties of the items in this.state.array except itemId and quantity and their values, spot on mateArray.map(). let strippedItems = this.state.array.map(({itemId, quantity}) => ({itemId, quantity})); would be the shorthand way to do it. If you wanted to be more explicit, you could say let strippedItems = this.state.array.map(item => { return {itemId: item.itemId, quantity: item.quantity}; }); They do the same thingAs mentioned in the comments, you should be storing your data in the state if you want to edit it. You have a decent start feeding in the index and value to the change function. Then you need to duplicate the array to prevent direct state mutation, alter the value accordingly and use setState to register the changes with React.
Array.from() is not a deep copy of the array and therefore the objects themselves (on which you are mutating the quantity) are the original objects.
render()function, otherwise it's going to overwrite back to the default values every time it renders