Le modal de suppression existe

front/src/ModalSuppression.js

+import React, {Component} from 'react'
+import {Modal, Button, Image, Grid} from 'semantic-ui-react'
+
+class ModalSupression extends Component {
+    state={hihi:true};
+    render() {
+        return (
+            <Modal open={this.props.open} size="tiny"
+                onClose={()=>this.props.closeModal()}
+            >
+            <Modal.Header style ={{textAlign:"center"}}>Veux tu vraiment supprimer ce Toucan ?</Modal.Header>
+            <Modal.Content>
+                <Image centered src={`/toucan/img/${this.props.imageId}`} size="medium"/>
+            </Modal.Content>
+            <Modal.Actions style ={{textAlign:"center"}} >
+                <Button negative>Supprimer le Toucan</Button>
+                <Button positive> Laisser le Toucan là où il est</Button>
+            </Modal.Actions>
+        </Modal>
+        )
+    }
+}
+
+export default ModalSupression
\ No newline at end of file

front/src/ToucanLine.js

 import React, {Component} from 'react'
-import {Table, Image, Button} from 'semantic-ui-react'
+import {Table, Image, Button, Modal} from 'semantic-ui-react'
+import ModalSuppression from './ModalSuppression'
 
 class ToucanLine extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {isModalOpen: false}
+        this.closeModal = this.closeModal.bind(this)
+    }
+
+
     date(time){
         const dateObject = new Date(time)
         const year = dateObject.getFullYear();
@@ -10,11 +18,14 @@ class ToucanLine extends Component {
         return (`${day+1}/${month+1}/${year}`)
     }
 
+    closeModal() {
+        this.setState({ isModalOpen: false })
+    }
+
     render(){
         return (
             <Table.Row>
                 <Table.Cell >
-                    {console.log(this.props.toucan["_id"])}
                     <a href={`http://localhost:8000/toucan/pdf/${this.props.toucan["_id"]}`}>
                     <Image
                     src={`/toucan/img/${this.props.toucan["_id"]}`}
@@ -29,7 +40,12 @@ class ToucanLine extends Component {
                     {this.date(this.props.toucan.date)}
                 </Table.Cell>
                 <Table.Cell style={{width:"fit-content"}}>
-                    <Button negative icon="cancel"/>
+                    <Button negative icon="cancel" onClick={() => this.setState({isModalOpen: true})}/>
+                    <ModalSuppression
+                    open={this.state.isModalOpen}
+                    imageId={this.props.toucan["_id"]}
+                    closeModal={this.closeModal}
+                    />
                 </Table.Cell>
             </Table.Row>
         )