Answer the question
In order to leave comments, you need to log in
How to unsubmit a form?
Good day, I am making a basket for an online store. Using formspree, I want to send an order to the mail, but when the quantity of goods in the basket changes (this.quantityHandler(e,key)}>Quantity +{el.quantity}- ), the form is sent. How to make it so that the form is sent only after clicking on the button (Create order)
class Basket extends Component {
state = {
items:null,
modal:false
}
static getDerivedStateFromProps(props,state) {
let addedItems = [];
props.data.data.forEach(el=>{
return el.isAdded === true ? addedItems.push({...el}) : null
})
const stateUpdate = {
items:addedItems,
id:props.data.id
}
return stateUpdate;
}
quantityHandler=(e,key)=>{
let val = e.target.value
this.props.changeQuantiy(val,key)
}
clearBasketHandler = ()=> {
this.props.clearBasket()
}
render() {
return (
<div className="basket">
<h2> you choose { this.state.items.length < 1 ? ('no one'):this.state.items.length } item(s)</h2>
{this.state.items ? this.state.items.map(el=>{
let key = el.id
return (
//form
<ul className="basket-item" key={key}>
<li>For {el.gender}</li>
<img src={el.img} alt="clothes" />
<li>{el.type}</li>
<li>Price {el.price} $</li>
<li>Brand {el.brand}</li>
<li onClick={(e)=>this.quantityHandler(e,key)}>Quantity <button value="+">+</button>{el.quantity}<button value="-">-</button> </li>
</ul>
//form
)
}) : null }
{ this.state.items.length < 1 ? null : (<><button onClick={this.clearBasketHandler}>Clear a basket</button> <button onClick={this}>Create order</button></>)}
</div>
)
}
}
Answer the question
In order to leave comments, you need to log in
<button type="button" value="+">+</button>{el.quantity}<button type="button" value="-">-</button>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question