Make the modal disappear after confirm and when click close. Style the code

src/components/forms/AddNewsForm.js

@@ -5,11 +5,26 @@ import { connect } from 'react-redux';
 import { postNews, writeNews, clearWrite } from '../../actions/news';
 
 class AddNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
   render() {
     const { title, text } = this.props.newNews;
     const author = this.props.user.id;
     return (
-      <Modal trigger={<Button >Add news</Button>}>
+      <Modal
+        open={this.state.showModal}
+        trigger={
+          <Button
+            onClick={() => { this.setState({ showModal: true }); }}
+          >Add news
+          </Button>
+        }
+      >
         <Modal.Header>Új hír:</Modal.Header>
         <Modal.Content>
           <Form>
@@ -32,14 +47,20 @@ class AddNewsForm extends Component {
           </Form>
         </Modal.Content>
         <Modal.Actions>
-          <Button inverted color='red' >
-            <Icon name='remove' /> Cancel
+          <Button
+            inverted
+            color='red'
+            onClick={() => { this.setState({ showModal: false }); }}
+          >
+            <Icon name='remove' />
+            Cancel
           </Button>
           <Button
             inverted
             color='green'
             onClick={() => {
                     this.props.postNews({ title, text, author });
+                    this.setState({ showModal: false });
                     this.props.clearWrite();
                     }}
           >

src/components/forms/EditNewsForm.js

@@ -5,11 +5,24 @@ import { connect } from 'react-redux';
 import { writeNews, editNews, clearWrite } from '../../actions/news';
 
 class EditNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
   render() {
     const { id, title, text } = this.props.selectedNews;
     const editedBy = this.props.user.id;
     return (
-      <Modal onOpen={this.props.onClick} trigger={<Button size='mini' >Edit</Button>}>
+      <Modal
+        open={this.state.showModal}
+        onOpen={this.props.onClick}
+        trigger={
+          <Button onClick={() => { this.setState({ showModal: true }); }} size='mini' >Edit</Button>
+        }
+      >
         <Modal.Header>Szerkesztés:</Modal.Header>
         <Modal.Content>
           <Form>
@@ -32,7 +45,11 @@ class EditNewsForm extends Component {
           </Form>
         </Modal.Content>
         <Modal.Actions>
-          <Button inverted color='red' >
+          <Button
+            inverted
+            color='red'
+            onClick={() => { this.setState({ showModal: false }); }}
+          >
             <Icon name='remove' /> Cancel
           </Button>
           <Button
@@ -42,6 +59,7 @@ class EditNewsForm extends Component {
                     this.props.editNews({
                                        id, title, text, editedBy,
                                       });
+                    this.setState({ showModal: false });
                     this.props.clearWrite();
                     }}
           >