Minor changes

Author: svwoodhouse

Class Notes/my-app/src/components/Cockpit/Cockpit.js

@@ -1,6 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 
+const cockpit = (props) => {
+    const classes = [];
+    if (props.persons.length <= 2) {
+      classes.push('red'); // classes = ['red']
+    }
+    if (props.persons.length <= 1) {
+      classes.push('bold'); // classes = ['red', 'bold']
+    }
+
 const StyledButton = styled.button`
   background-color: ${props => props.alt ? 'red' : 'green'};
   color: white;
@@ -15,18 +24,9 @@ const StyledButton = styled.button`
   }
 `;
 
-const cockpit = (props) => {
-    const classes = [];
-    if (props.persons.length <= 2) {
-      classes.push('red'); // classes = ['red']
-    }
-    if (props.persons.length <= 1) {
-      classes.push('bold'); // classes = ['red', 'bold']
-    }
-
 return(
     <div>
-        <h1>Hi, I'm a React App</h1>
+        <h1>{props.title}</h1>
         <p className={classes.join(' ')}>This is really working!</p>
         <StyledButton 
             alt={props.showPersons} 

Class Notes/my-app/src/components/Persons/Person/Person.js

@@ -16,6 +16,7 @@ const StyledDiv = styled.div`
 `;
 
 const person = (props) => {
+  console.log('[Person.js] rendering...')
     // const rnd = Math.random();
     // if (rnd > 0.7) {
     //     throw new Error("Something went wrong");

Class Notes/my-app/src/components/Persons/Persons.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Person from './Person/Person';
 
-const persons = (props) => props.persons.map((person, index) => {
+const persons = (props) =>{ 
+    console.log('[Persons.js] rendering...')
+    return props.persons.map((person, index) => {
         return (
           <Person
             click={() => props.clicked(index)}
@@ -10,5 +12,6 @@ const persons = (props) => props.persons.map((person, index) => {
             key={person.id}
             changed={event => props.changed(event, person.id)}/>);
         });
+    }
 
 export default persons;

Class Notes/my-app/src/containers/App.js

@@ -6,6 +6,12 @@ import Cockpit from '../components/Cockpit/Cockpit';
 
 
 class App extends Component {
+
+  constructor(props) {
+    super(props)
+    console.log('[App.js] constructor');
+  }
+
   state = {
     persons: [
       { id: 'asfa1', name: 'Max', age: 28 },
@@ -16,6 +22,19 @@ class App extends Component {
     showPersons: false
   };
 
+  static getDerivedStateFromProps(props, state) {
+    console.log('[App.js] getDeprivedStateFromProps', props);
+    return state;
+  }
+
+  componentWillMount() {
+    console.log('[App.js] componentWillMount')
+  }
+
+  componentDidMount() {
+    console.log('[App.js] componentDidMount')
+  }
+
   nameChangedHandler = (event, id) => {
     const personIndex = this.state.persons.findIndex(p => {
       return p.id === id;
@@ -48,7 +67,7 @@ class App extends Component {
   };
 
   render() {
-
+    console.log('[App.js] render');
     let persons = null;
 
     if (this.state.showPersons) {
@@ -71,6 +90,7 @@ class App extends Component {
     return (
       <div className="App">
         <Cockpit
+          title={this.props.appTitle}
           showPersons={this.state.showPersons}
           persons={this.state.persons}
           clicked={this.togglePersonsHandler} />

Class Notes/my-app/src/index.js

@@ -6,7 +6,7 @@ import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App appTitle="Person Manager"/>
   </React.StrictMode>,
   document.getElementById('root')
 );