Non working notification thingy

client/components/Noti.jsx

+import React from 'react';
+
+
+class Noti extends React.Component {
+
+    state = {
+        messages: [
+            {
+                title: 'Errorrrrrr!',
+                content: 'Omg li la',
+                type: 'danger',
+                duration: 10,
+                closable: true,
+                small: true
+            }
+        ]
+    }
+
+    new = (message, options) => {
+        console.log(message);
+    }
+
+    render() {
+
+        return (
+            <div>
+            {this.state.messages.map((message, index) => 
+                <div className={"notification is-" + message.type} key={index}>
+                    <p className="title">{message.title}</p>
+                    {message.closable ? <button className="delete"></button> : null}
+                    {message.content}
+                </div>
+            )}
+            </div>
+        )
+    }
+
+
+}
+
+
+export default Noti;
+

client/views/Grade.js

@@ -3,21 +3,44 @@ import NavBar from '../components/NavBar';
 import Hero from '../components/Hero';
 import Footer from '../components/Footer';
 
-const Grade = () => {
-  return (
-      <div>
+import Noti from '../components/Noti.jsx'
 
-        <NavBar />
+class Grade extends React.Component {
 
-        <Hero title='Grade' subtitle='This is where the magic happens!' />
-        
-        <h1>React Router demo</h1>
-        Hoi dit de Grade
 
-        <Footer />
+    click = () => {
+        this.Noti.new('Heeeej dit werkt');
+    }
 
-      </div>
-  )
+    render() {
+
+        return (
+            <div>
+
+                <NavBar />
+
+                <Hero title='Grade' subtitle='This is where the magic happens!' />
+
+                <section className="section">
+
+                    <div className="container">
+
+                        <h1>React Router demo</h1>
+                        Hoi dit de Grade
+
+                        <Noti ref={(noti) => { this.Noti = noti; }} />
+
+                        <button className="button" onClick={this.click}>Hii</button>
+
+                    </div>
+
+                </section>
+
+                <Footer />
+
+            </div>
+        )
+    }
 }
 
 export default Grade;
\ No newline at end of file