I got a list of products and this products contain different prices. When a user selects a product he may edit all the prices. This looks like this:
_renderPriceRow() {
return (
this.props.product.prices.map((price, i) => {
return (
<tr key={'pricerowinput-' + Math.random()}>
<td >
<input type="text" className="form-control" defaultValue={price.quantity}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.name}/>
</td>
<td >
<input type="text" className="form-control" defaultValue={price.price}/>
</td>
<td>
<button type="button" className="btn btn-sm" aria-label="Delete price" onClick={() => alert("Price deleted")}>
<span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</td>
</tr>
);
})
);
}
I randomized the keys for the rows so the rows get rerendered as if they don't change the default values won't change if another product is selected.
Props:
const mapStateToProps = (state) => {
const products = state.products.items;
const isEmpty = state.products.items === undefined || state.products.items.size === 0 || state.productSelected === null;
if(isEmpty) {
return ( {product: null});
}
return {
product: products.get(state.productSelected)
}
};
So the product is taken from the store where a (filtered) list of the products lies.
For my next steps I have actually two Questions: 1. How would I add or delete a row? 2. How would I compose the prices in the table to an array and the other product fields (not shown) to an object which I can dispatch?
Due to redux everything is just a property. So getting them into the component was easy. How to get them out?