I cannot close the modal and dimmer in semantic - using react - reactjs

Question

I'm trying to get a modal to close in react, using semantic modal. For some reason, I can get the form to close, but the dimmer remains. I need help.
I have tried $('.ui.modal').modal('hide dimmer') and many number of other things.
Modal is here:
export default class AddCamerModal extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
id="add-camera-form"
trigger={<Button id="color-0093ee border-color-0093ee"
basic
icon="video-camera"
size="large"></Button>}
>
<Header icon='cube' content='New Object' />
<Modal.Content>
<AddCameraForm />
</Modal.Content>
</Modal>
)
}
Form is here:
export default class AddCameraForm extends React.Component {
constructor(props) {
super(props);
}
closeModal() {
$('.modal').modal('hide');
}
render() {
return (
<Form size="large">
<Form.Group widths="equal">
<Form.Field label='Name' control='input' placeholder='Name' name="name" id="name" required />
</Form.Group>
<Form.Group>
<Button type='submit' className="submit" onClick={this.handleSave}>Save</Button>
<Button type='deny' className="deny" onClick={this.closeModal}>Cancel</Button>
</Form.Group>
</Form>
)
}
}

Answer 1

You should pass 'open' prop false to your modal. You can do it via state or via props. For example:
export default class AddCamerModal extends React.Component {
constructor(props) {
super(props);
this.closeModal=this.closeModal.bind(this)
state={ isOpen: true }
}
closeModal() {
this.setState({isOpen: !this.state.isOpen});
}
render() {
return (
<Modal
open={this.props.open}
id="add-camera-form"
trigger={<Button id="color-0093ee border-color-0093ee"
basic
icon="video-camera"
size="large"></Button>}
>
<Header icon='cube' content='New Object' />
<Modal.Content>
<AddCameraForm closeModal={this.closeModal} />
</Modal.Content>
</Modal>
)
}
}
export default class AddCameraForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Form size="large">
<Form.Group widths="equal">
<Form.Field label='Name' control='input' placeholder='Name' name="name" id="name" required />
</Form.Group>
<Form.Group>
<Button type='submit' className="submit" onClick={this.handleSave}>Save</Button>
<Button type='deny' className="deny" onClick={this.props.closeModal}>Cancel</Button>
</Form.Group>
</Form>
</div>
)
}
}

Answer 2

Maybe try this...
export default class AddCamerModal extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
render() {
return (
<Modal
id="add-camera-form"
open={this.state.open}
onClose={e => this.setState({ open: false })}
trigger={
<Button
id="color-0093ee border-color-0093ee"
basic
icon="video-camera"
size="large"
onClick={e => this.setState({ open: true })}
/>
}
>
<Header icon="cube" content="New Object" />
<Modal.Content>
<AddCameraForm />
</Modal.Content>
</Modal>
);
}
}

Answer 3

Okay, I want to post this just in case someone gets stuck in the same rabbit hole I was in. I had to set the open attribute in the modal, then pass that down to my AddCameraForm through the closeModal prop.
Here's the AddCameraModal:
export default class AddCameraModal extends React.Component {
constructor(props) {
super(props);
this.openModal=this.openModal.bind(this);
this.closeModal=this.closeModal.bind(this);
this.state = { isOpen: false }
}
openModal() {
this.setState({isOpen: true})
}
closeModal() {
this.setState({isOpen: false});
}
render() {
return (
<Modal
open={this.state.isOpen}
id="add-camera-form"
trigger={
<Button id="color-0093ee border-color-0093ee"
basic
icon="video-camera"
size="large" onClick={this.openModal}>
</Button>
}
>
<Header icon='cube' content='New Object' />
<Modal.Content>
<AddCameraForm closeModal={this.closeModal} openModal={this.openModal} />
</Modal.Content>
</Modal>
)
}
}
And here's the button's code from my AddCameraForm class:
<Button type='deny' className="cancel" onClick={this.props.closeModal}>Cancel</Button>