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