How to detect object property change and handle mapped object update? - reactjs

Question

I do not quite understand yet how react is working.
As far as I noticed I am supposed to handle detection of a change of form fields (for example angular and knockout detect fields changes with observables).
I have the following snippet in react:
constructor(props) {
super(props);
this.state = {
products: [],
branchId: document.getElementById('branchId').value
};
this.updateproduct = this.updateproduct.bind(this);
this.deleteproduct = this.deleteproduct.bind(this);
}
render() {
return (
<Container>
{
this.state.products.map(product => (
<div key={product.id}>
<div className="col-xs-12 col-sm-3">
<div className="user-label">Title</div>
<input type="text" name="title" className="form-control" defaultValue={product.title} onChange={this.handleChange} />
</div>
<div className="col-xs-12 col-sm-3">
<div className="user-label">Upload image</div>
<input type="text" name="image" className="form-control" defaultValue={product.image} onChange={this.handleChange} />
<img src={product.image} height="100" width="auto" style={{ marginTop: '5px' }} />
</div>
<div className="col-xs-12 col-sm-5">
<div className="user-label">Description</div>
<textarea name="description" className="form-control" rows="7" defaultValue={product.description} onChange={this.handleChange}>
</textarea>
</div>
<div className="col-xs-12 col-sm-1">
<div className="user-label"> </div>
<span className="btn btn-danger pull-right" data-btntype="delete" onClick={() => this.deleteproduct(product.id)}>
×
</span>
<span className="btn btn-success pull-right" data-btntype="update" onClick={() => this.updateproduct(this)} style={{ marginTop: '2px' }}>
✓
</span>
</div>
<div className="clearfix"></div>
</div>
))
}
</Container>
)
}
and don't quite know how to write a function that detect change of every field?
Also how can I handle the form update?
The above snippet is part of a bigger form (that's why form tag is not there) and I need to handle only the product object update above (not the entire form).
UPDATE
I applied the following solution based on #Kejt answer - with just a typo/ two corrections:
In the input:
onChange={e => this.handleChange(product.id, 'name', e.target.value) // Note 'this' must be added to the function whenever it's called
And then the handleChange method:
handleChange = (id, propertyName, value) => {
this.setState(
state => ({ // mapped 'products' need to be 'this.state.products'
products: this.state.products.map(product => product.id === id ? {...product, [propertyName]: value} : product)
})
)
}
Plus I had to add #babel/plugin-proposal-class-properties plugin to make the syntax working.
And in the class contructor added the usual declaration:
this.handleChange = this.handleChange.bind(this);

Answer 1

you already have onChange listener assigned to input onChange={this.handleChange}
you need to add handleChange method to your component
handleChange = event => {
console.log(event.target.value)
}
you can rebuild this method with adding product id and input name
onChange={e => handleChange(product.id, 'name', e.target.value)
and then in handleChange method
handleChange = (id, propertyName, value) => {
this.setState(
state => ({
products: products.map(product => product.id === id ? {...product, [propertyName]: value} : product)
})
}