finished react section7

react/7/pics/src/components/App.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import SearchBar from './SearchBar'
 
-const App = () => {
-    return (
-        <div className="ui container" style={{ marginTop: "10px" }}>
-            <SearchBar />
-        </div>
-    )
+class App extends React.Component {
+    onSearchSubmit(term) {
+        console.log(term)
+    }
+
+    render() {
+        return (
+            <div className="ui container" style={{ marginTop: "10px" }}>
+                <SearchBar onSubmit={this.onSearchSubmit} />
+            </div>
+        )
+    }
 }
 
 export default App;

react/7/pics/src/components/SearchBar.js

@@ -1,14 +1,28 @@
 import React from 'react'
 
 class SearchBar extends React.Component {
+    state = { term: '' }
+
+    // using an arrow function instead of just defining the function is a way
+    // to prenvent undefined type of errors
+    // it is possible to do this in the html tag
+    // onSubmit={(event) => this.onFormSubmit(event)}
+    onFormSubmit = (event) => {
+        // Prevent the browser to refresh automatically
+        event.preventDefault()
+        this.props.onSubmit(this.state.term)
+    }
+
+
+
+
     render() {
         return (
             <div className="ui segment">
-
-                <form className="ui form" action="">
+                <form className="ui form" onSubmit={this.onFormSubmit}>
                     <div className="field">
                         <label htmlFor="">Image Search</label>
-                        <input type="text" />
+                        <input value={this.state.term} type="text" onChange={(e) => this.setState({ term: e.target.value })} />
                     </div>
                 </form>
             </div>)

react/NOTES.md

@@ -14,6 +14,13 @@ It is possible to use `defaultProps` to instantiate the default behaviour of a c
 Used anytime to show simple content to the user. (the card for example -- create
 JSX pass some props and return it).
 
+Alternative writing:
+```js
+const SearchBar = () => (
+    <div></div>
+)
+```
+
 ## Class components
 
 For complex content, respond to user input, network request. Can use the state
@@ -35,10 +42,29 @@ When components are reloaded they are also reloading the child components.gt
 * `State` can *only* be updated with the `setState` function
 
 Video 61: refactorisation on state and constructors, you can remove the whole constructor by passing a state to the class. => what is the state in a react application? Code is passed to Babel and understand the code that is compiled and extends + implements the constructor function.
-```
+``` js
      constructor(props) {
          super(props)
          this.state = { lat: null, errorMessage: '' }
      }
 ```
-* 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
+* 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
+
+* `onInputChange`: In that case:
+``` js
+    <input type="text" onChange={this.onInputChange}>
+```
+The function `onInputChange` is not called as a function (`onInputChange()`) but as a callback so the function is not run everytime the component is rendered but when the component is called.
+Other functions: `onClick`, `onSubmit` and `onChange`
+
+* replace handlers by arrow functions, insead of:
+
+``` js
+    <input type="text" onChange={this.onInputChange}>
+```
+
+you get:
+
+``` js
+    <input type="text" onChange={(e) => console.log(e.target.value)}>
+```