Close React Modal With Submit

Question

Hello there I'm trying to figure out how to close this modal and submit a new item at the same time... right now it's only doing one or the other. If I put <button onClick={this.handleCloseModal}>Submit</button> at the bottom there it wont submit the information in the form and if I take away {this.handleCloseModal} then it'll add the item but I have to refresh to close the modal.

class AddItem extends React.Component {
	constructor() {
		super();
		this.state = {
			showModal: false
		};

		this.handleOpenModal = this.handleOpenModal.bind(this);
    	this.handleCloseModal = this.handleCloseModal.bind(this);
  	}
  
  		handleOpenModal () {
    	this.setState({ showModal: true });
  	}
  
  		handleCloseModal () {
    	this.setState({ showModal: false });
  	}


	render() {
		return(
		<div>
		<button onClick={this.handleOpenModal}>Add Item</button>
		<ReactModal isOpen={this.state.showModal}>
		<form 
			onSubmit={(event) => {
				event.preventDefault()

				const input = {
					name: event.target.itemName.value,
					price: event.target.itemPrice.value,
					description: event.target.itemDescription.value, 
					userEmail: this.props.currentUser.email
			}

				this.props.dispatch(saveItem(input))
		
				event.target.itemName.value = ''
				event.target.itemPrice.value = ''
				event.target.itemDescription.value = ''
		
			}}>
				<label>
					Item Name:
					<br />
					<input type="text" name="itemName" validate={[required, nonEmpty]} />
				</label>
				<br />
				<label>
					Price:
					<br />
					<input type="text" name="itemPrice" validate={[required, nonEmpty]} />
				</label>
				<br />
				
				<br />
				<label>
				Description:
					<br />
					<textarea type="text" name="itemDescription" validate={[required, nonEmpty]} />
				</label>
				<br />
				<button onClick={this.handleCloseModal}>Submit</button>
			</form>
			</ReactModal>
			</div>
		)
	}
}

const mapStateToProps = state => ({
    currentUser: state.auth.currentUser
});
	
	export default withRouter(connect(mapStateToProps)(AddItem));

Answer 1

You can use a function handler for submitting the form, and then closing the modal at the end.

handleOnSubmit(event) {
    event.preventDefault()

    const input = {
        name: event.target.itemName.value,
        price: event.target.itemPrice.value,
        description: event.target.itemDescription.value, 
        userEmail: this.props.currentUser.email
    }

    this.props.dispatch(saveItem(input))

    event.target.itemName.value = ''
    event.target.itemPrice.value = ''
    event.target.itemDescription.value = ''

    this.handleCloseModal(); <--- you can place it right here
}

The button would be using to trigger the onSubmit function passed to your form:

<form onSubmit={this.handleOnSubmit}>
.
.
.
</form>

// Here the button will use the form onSubmit by default
// Hence, handleOnSubmit will be called
<button type="submit">Submit</button>

Don't forget to bind handleOnSubmit