diff --git a/react/4/seasons/src/Spinner.js b/react/4/seasons/src/Spinner.js
index f9682d1..32f982e 100644
--- a/react/4/seasons/src/Spinner.js
+++ b/react/4/seasons/src/Spinner.js
@@ -1,13 +1,17 @@
import React from 'react';
-const Spinner = () => {
+const Spinner = (props) => {
return (
- Loading...
+ {props.message}
)
}
+Spinner.defaultProps = {
+ message: 'Loading...'
+}
+
export default Spinner
\ No newline at end of file
diff --git a/react/4/seasons/src/index.js b/react/4/seasons/src/index.js
index 7e88cd6..5199a23 100644
--- a/react/4/seasons/src/index.js
+++ b/react/4/seasons/src/index.js
@@ -30,9 +30,10 @@ class App extends React.Component {
return
}
- return
+ return
}
}
+
ReactDOM.render(
,
document.querySelector('#root')
diff --git a/react/NOTES.md b/react/NOTES.md
index ace192e..0d52b06 100644
--- a/react/NOTES.md
+++ b/react/NOTES.md
@@ -7,6 +7,8 @@ A system for passing data from a parent component to a child component. The goal
Props are objects so the fields have to be called as methods: `props.author` for instance.
+It is possible to use `defaultProps` to instantiate the default behaviour of a component.
+
## Functional components
Used anytime to show simple content to the user. (the card for example -- create
@@ -38,4 +40,5 @@ Video 61: refactorisation on state and constructors, you can remove the whole co
super(props)
this.state = { lat: null, errorMessage: '' }
}
-```
\ No newline at end of file
+```
+* always try to have one statement in the render method, in case it isn't possible try to use a helper function with the complex cases and returning to the render method. see video 70
\ No newline at end of file