How would I go about setting up this modal to toggle? - reactjs

Question

I'm trying to get an editModal and a detailsModal to open on click. I set up actions and reducers for the modal so it can be stored in the global state and it works, but currently the modals are set to open automatically and I cannot close them. I believe it's something wrong with my logic, but it seems like it would be rather straightforward. Does anyone have any tips on how to complete this?
modalReducer.js
import { OPEN_MODAL } from "../actions/types";
const initialState = {
modal: false,
};
export default function (state = initialState, action) {
switch (action.type) {
case OPEN_MODAL:
return {
...state,
modal: false,
};
default:
return state;
}
}
ClientEditModal.js
import React, { Component } from "react";
import {
Button,
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input,
} from "reactstrap";
import { connect } from "react-redux";
import { editClient } from "../actions/clientActions";
import { openModal } from "../actions/modalActions";
import PropTypes from "prop-types";
class ClientEditModal extends Component {
componentDidMount() {
this.props.editClient();
this.props.openModal();
}
toggle = () => {
this.setState({
modal: !this.props.modal,
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
// Close modal
this.toggle();
};
displayClient = (clients, _id) => {
return (
<FormGroup key={_id} timeout={500} classNames="fade">
<Label for="name"> Name </Label>
<Input
type="text"
name="name"
id="client"
value={clients.name}
onChange={this.onChange}
></Input>
<Label for="email"> Email </Label>
<Input
type="text"
name="email"
id="client"
value={clients.email}
onChange={this.onChange}
></Input>
<Label for="number"> Number </Label>
<Input
type="text"
name="number"
id="number"
value={clients.number}
onChange={this.onChange}
></Input>
<Button color="dark" style={{ marginTop: "2rem" }} block>
Submit Client Edit
</Button>
</FormGroup>
);
};
render() {
const { clients } = this.props.client;
return (
// Split button into separate component
<div>
<Button
color="dark"
style={{ marginBottom: "2rem", marginLeft: "1rem" }}
onClick={this.toggle}
>
Edit
</Button>
<Modal
isOpen={this.props.modal}
toggle={this.toggle}
style={{ padding: "50px" }}
>
<ModalHeader toggle={this.toggle}> Edit</ModalHeader>
<ModalBody>
<Form onSubmit={this.onSubmit}>
{clients.map(this.displayClient)}
</Form>
</ModalBody>
</Modal>
</div>
);
}
}
ClientEditModal.propTypes = {
editClient: PropTypes.func.isRequired,
client: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
client: state.client,
modal: state.modal,
});
export default connect(mapStateToProps, { editClient, openModal })(
ClientEditModal
);
modalActions.js
import { OPEN_MODAL } from "./types";
export const openModal = () => {
return {
type: OPEN_MODAL,
};
};

Answer 1

The main issue is - your toggle function, !this.props.modal will invert the value of modal and the component always holds the value of true.
So, one option is to maintain another action for closing modal.
See the updated code snippets below.
Reducer
import { OPEN_MODAL } from "../actions/types";
const initialState = {
modal: false,
};
export default function (state = initialState, action) {
switch (action.type) {
case OPEN_MODAL:
return {
...state,
modal: false,
};
case CLOSE_MODAL:
return {
...state,
modal: true,
};
default:
return state;
}
}
Actions
import { OPEN_MODAL } from "./types";
export const openModal = () => {
return {
type: OPEN_MODAL,
};
};
export const closeModal = () => {
return {
type: CLOSE_MODAL,
};
};
ClientModal.js
import React, { Component } from "react";
import {
Button,
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input,
} from "reactstrap";
import { connect } from "react-redux";
import { editClient } from "../actions/clientActions";
import { openModal } from "../actions/modalActions";
import PropTypes from "prop-types";
class ClientEditModal extends Component {
componentDidMount() {
this.props.editClient();
this.props.openModal();
}
toggle = () => {
// this.setState({ //<---- setstate is not required as once the state in the store is updated, then the component is re-rendered automatically
// modal: !this.props.modal, //<---- once toggle is executed - it is always true
//});
this.props.closeModal()
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
// Close modal
this.toggle();
};
displayClient = (clients, _id) => {
return (
<FormGroup key={_id} timeout={500} classNames="fade">
<Label for="name"> Name </Label>
<Input
type="text"
name="name"
id="client"
value={clients.name}
onChange={this.onChange}
></Input>
<Label for="email"> Email </Label>
<Input
type="text"
name="email"
id="client"
value={clients.email}
onChange={this.onChange}
></Input>
<Label for="number"> Number </Label>
<Input
type="text"
name="number"
id="number"
value={clients.number}
onChange={this.onChange}
></Input>
<Button color="dark" style={{ marginTop: "2rem" }} block>
Submit Client Edit
</Button>
</FormGroup>
);
};
render() {
const { clients } = this.props.client;
return (
// Split button into separate component
<div>
<Button
color="dark"
style={{ marginBottom: "2rem", marginLeft: "1rem" }}
onClick={this.toggle}
>
Edit
</Button>
<Modal
isOpen={this.props.modal}
toggle={this.toggle}
style={{ padding: "50px" }}
>
<ModalHeader toggle={this.toggle}> Edit</ModalHeader>
<ModalBody>
<Form onSubmit={this.onSubmit}>
{clients.map(this.displayClient)}
</Form>
</ModalBody>
</Modal>
</div>
);
}
}
ClientEditModal.propTypes = {
editClient: PropTypes.func.isRequired,
client: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
client: state.client,
modal: state.modal,
});
export default connect(mapStateToProps, { editClient, openModal, closeModal })(
ClientEditModal
);