Update react-examples

react-examples.md

@@ -1,123 +1,97 @@
 # Kodexempel från teoridelen
 
 ## Att bygga en reactkomponent
-```javascript
-    //MyComponent.js
-    import React, { Component } from 'react';
-
-    class MyComponent extends Component {
-        render() {
-            return (
-                <div>
-                    <h2>{this.props.title}</h2>
-                    <hr />
-                    <p>{this.props.content}</p>
-                    <footer>Copyright &copy; React 2018</footer>
-                </div>
-            );
-        }
-    }
 
-    export default MyComponent;
+```javascript
+//MyComponent.js
+import React from "react";
+
+const MyComponent = ({ title, content }) => {
+  return (
+    <div>
+      <h2>{title}</h2>
+      <hr />
+      <p>{content}</p>
+      <footer>Copyright &copy; React 2018</footer>
+    </div>
+  );
+};
+
+export default MyComponent;
 ```
 
 ## Konsumera komponent
-```javascript
-    //App.js
-     import React, { Component } from 'react';
-    import App from './MyComponent';
-
-    class MyComponent extends Component {
-        render() {
-            return (
-                <div className="container">
-                    <MyComponent title="hello opkoko" content="React is awesome!"/>
-                </div>
-            );
-        }
-    }
 
-    export default App;
+```javascript
+//MyComponent.js
+import React from "react";
+import Hello from "./Hello";
+
+const MyComponent = () => {
+  return (
+    <div className="container">
+      <Hello title="hello opkoko" content="React is awesome!" />
+    </div>
+  );
+};
+
+export default MyComponent;
 ```
 
 ## Component state
-```javascript
-    import React, { Component } from 'react';
-
-    class ComponentWithState extends Component {
-
-        constructor(props) {
-            super(props);
-            this.state = {
-                active: true
-            };
-        }
-
-        handleClick = () => {
-            this.setState({
-                active: !this.state.active
-            });
-        }
 
-        render() {
-            const buttonState = this.state.active ? 'On' : 'Off';
-            return (
-                <div className="ComponentWithState">
-                    <p>Click the button!</p>
-                    <button onClick={this.handleClick}>Click me!</button>
-                    <p>{buttonState}</p>
-                </div>
-            );
-        }
-    }
-
-    export default ComponentWithState;
+```javascript
+import React, { useState } from "react";
+
+const ComponentWithState = () => {
+  const [active, setActive] = useState(true);
+
+  handleClick = (e) => {
+    setActive(!active);
+  };
+
+  const buttonText = active ? "On" : "Off";
+  return (
+    <div className="ComponentWithState">
+      <p>Click the button!</p>
+      <button onClick={handleClick}>Click me!</button>
+      <p>{buttonText}</p>
+    </div>
+  );
+};
+
+export default ComponentWithState;
 ```
 
 ## User events
+
 ```javascript
-    import React, { Component } from 'react';
+import React from "react";
 
-    class UserEventComponent extends Component {
+const UserEventComponent = () => {
+  const [input, setInput] = useState("");
 
-        constructor(props) {
-            super(props);
-            this.state = {
-                input: ''
-            };
-        }
+  const handleOnChange = (event) => {
+    const text = event.target.value;
+    setInput(text);
+  };
 
-        handleOnChange(event) {
-            const text = event.target.value;
-            this.setState({
-                input: text
-            });
-        }
+  return <input type="text" onChange={handleOnChange} />;
+};
 
-        render() {
-            return (
-                <input
-                    type="text"
-                    onChange={this.handleOnChange}
-                />
-            );
-        }
-    }
-
-    export default UserEventComponent;
+export default UserEventComponent;
 ```
 
 ## Map + Keys
-```javascript
-    import React, { Component } from 'react';
 
-    class ComponentWithList extends Component {
+```javascript
+    import React from 'react';
 
-        render() {
+    const ComponentWithList = (items) => {
             return (
                 <h1>Awesome people list</h1>
                 <ul>
-                    {this.props.items.map(item => {
+                    {items.map(item => {
                         return (
                             <li key={item.id}>
                                 {item.name}
@@ -126,25 +100,23 @@
                     })}
                 </ul>
             );
-        }
     }
 
     export default ComponentWithList;
 ```
+
 ```javascript
-    //...konsumera ComponentWithList
-
-    const items = [
-        {
-            id: 1,
-            name: "Robert"
-        },
-        {
-            id: 2,
-            name: "Mathias"
-        }
-    ];
-    <ComponentWithList items={items} />
+//...konsumera ComponentWithList
+
+const items = [
+  {
+    id: 1,
+    name: "Anton",
+  },
+  {
+    id: 2,
+    name: "Mathias",
+  },
+];
+<ComponentWithList items={items} />;
 ```
-
-