How do I manage this form in redux? - reactjs

Question

I'm building an online store and I'm creating a form where the user will select an option and the option's price will be added to the total price
class SingleProduct extends Component {
constructor(props) {
super(props);
this.state = {};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
var products = this.props.products.products;
var ID = this.props.router.location.pathname.slice(9, 100)
var productArray = this.props.products.products.data.filter(function(product) {
return product.id === ID;
})
var product = productArray[0];
var addToCart = (id, options) => {
this.props.dispatch((dispatch) => {
if(this.props.value == 'select'){
this.props.product.options = 0;
}
else if(this.state.value == 'no-edge'){
this.props.product.options = 0;
}
else if(this.state.value == '2inchHemOnly'){
this.props.product.options = 20;
}
else if(this.state.value == '2inchHG'){
this.props.product.options = 25;
}
else if(this.state.value == 'HandG'){
this.props.product.options = 30;
}
else if(this.state.value == 'rope-rail'){
this.props.product.options = 35;
}
else if(this.state.value == 'pole-pocket'){
this.props.product.options = 40;
}
var values = this.props.product.values;
var options = this.props.product.options;
api.AddCart(id, this.props.product.quantity)
.then((options) => {
console.log(options)
dispatch({type: "Update_Options", payload: options})
})
.then((values) => {
console.log(values)
dispatch({type: "Update_Value", payload: values})
})
.then((cart) => {
console.log(cart)
dispatch({type: "Cart_Updated", gotNew: false})
})
.then(() => {
dispatch({type: "Fetch_Cart_Start", gotNew: false})
api.GetCartItems()
.then((cart, options, values) => {
dispatch({type: "Fetch_Cart_End", payload: cart, gotNew: true})
dispatch({type: "Update_Options", payload: options})
dispatch({type: "Update_Value", payload: values})
})
})
.then(() => {
console.error(options)
})
.catch((e) => {
console.log(e)
})
})
}
addToCart(product.id);
}
return (
<main role="main" id="container" className="main-container push">
<section className="product">
<div className="content">
<div className="product-listing">
<div className="product-description">
<p className="price"><span className="hide-content">Unit price </span>{'$' + product.meta.display_price.with_tax.amount/100 + this.props.product.options}</p>
<form className="product" onSubmit={this.handleSubmit.bind(this)}>
<label>SELECT EDGING OPTION</label>
<select name="edging" value={this.state.value} onChange={this.handleChange}>
<option value="select">-- Please select --</option>
<option value="no-edge">No Edge</option>
<option value="2inchHemOnly">2” Hem Only</option>
<option value="2inchHG">2” Hem and Grommets 24” On Center</option>
<option value="HandG">Hem and Grommets 12” on Center</option>
</select>
<div className="quantity-input" style={style}>
<p className="hide-content">Product quantity.</p>
<button type="submit" className="submit">Add to cart</button>
</form>
</div>
</div>
</section>
<MailingList />
</main>
)
}
}
export default connect(mapStateToProps)(SingleProduct);
And here is my reducer:
const initialState = {
quantity: 1,
options: 0,
values: [
{ value: '-- Please select --' },
{ value: 'No Edge' },
{ value: '2” Hem Only' },
{ value: 'No Edge' },
{ value: '2” Hem and Grommets 24” On Center' },
{ value: 'Hem and Grommets 12” on Center' }
]
}
const ProductReducer = (state=initialState, action) => {
switch (action.type) {
case "Update_Quantity": {
return {...state, quantity: action.payload};
}
case "Update_Options": {
return {...state,
options: action.payload};
}
case "Update_Value": {
return {...state,
value: action.payload};
}
default: {
return {...state};
}
}
};
export default ProductReducer;
When I add to the cart my 'value' is undefined. And on refresh, 'options' goes back to 0. My quantity stays in the state though. I just don't know why this is happening.

Answer 1

The react docs state: Whether you declare a component as a function or a class, it must never modify its own props.
Therefore, you might want to make a copy of the props into a variable and then modify the copy. One way to do this might be to place this line:
let propsCopy = { ...this.props }
above the line var addToCart = (id, options) => {
and then use propsCopy in place of props in the subsequent lines.