diff --git a/react-examples.md b/react-examples.md
index 01f4f37..152e133 100644
--- a/react-examples.md
+++ b/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 (
-
-
{this.props.title}
-
-
{this.props.content}
-
-
- );
- }
- }
- export default MyComponent;
+```javascript
+//MyComponent.js
+import React from "react";
+
+const MyComponent = ({ title, content }) => {
+ return (
+
+
{title}
+
+
{content}
+
+
+ );
+};
+
+export default MyComponent;
```
## Konsumera komponent
-```javascript
- //App.js
- import React, { Component } from 'react';
- import App from './MyComponent';
-
- class MyComponent extends Component {
- render() {
- return (
-
-
-
- );
- }
- }
- export default App;
+```javascript
+//MyComponent.js
+import React from "react";
+import Hello from "./Hello";
+
+const MyComponent = () => {
+ return (
+
+
+
+ );
+};
+
+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 (
-
-
Click the button!
-
-
{buttonState}
-
- );
- }
- }
-
- 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 (
+
+
Click the button!
+
+
{buttonText}
+
+ );
+};
+
+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 ;
+};
- render() {
- return (
-
- );
- }
- }
-
- 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 (
Awesome people list
- {this.props.items.map(item => {
+ {items.map(item => {
return (
-
{item.name}
@@ -126,25 +100,23 @@
})}
);
- }
}
export default ComponentWithList;
```
+
```javascript
- //...konsumera ComponentWithList
-
- const items = [
- {
- id: 1,
- name: "Robert"
- },
- {
- id: 2,
- name: "Mathias"
- }
- ];
-
+//...konsumera ComponentWithList
+
+const items = [
+ {
+ id: 1,
+ name: "Anton",
+ },
+ {
+ id: 2,
+ name: "Mathias",
+ },
+];
+;
```
-
-