btnClass not working 2

Author: larmax

firstapp/src/Components/Cockpit/Cockpit.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './Cockpit.module.css';
+const cockpit = (props) => {
+
+  const assignedClasses = [];
+  let btnClass = '';
+  if(props.showPersons){
+
+    btnClass = styles.Button;
+    console.log('btnclass',    btnClass);
+    if (props.showPersons) {
+
+      btnClass = [styles.Button, styles.Red].join( ' ' );
+      console.log('showing Persons', btnClass);
+    }
+  }
+
+  if (props.persons.length <= 2) {
+    assignedClasses.push(styles.red);
+    console.log('ass. class',assignedClasses);
+  }
+  if (props.persons.length <= 1) {
+    assignedClasses.push(styles.bold);
+    console.log('ass. class', assignedClasses );
+  }
+
+  return(
+    <div>
+    <h1>tekstiä</h1>
+    <p className={assignedClasses.join(' ')}>lisää tekstiä</p>
+
+    <button
+    className={btnClass}
+    onClick={props.clicked}>Toggle Persons</button>
+    </div>
+  )
+};
+export default cockpit;

firstapp/src/Components/Cockpit/Cockpit.module.css

@@ -0,0 +1,31 @@
+
+.red {
+    color: red;
+  }
+
+  .bold {
+    font-weight: bold;
+  }
+
+  .Button button {
+    border: 1px solid blue;
+    padding: 16px;
+    background-color: green;
+    font: inherit;
+    color: white;
+    cursor: pointer;
+  }
+
+  .Button button:hover {
+    background-color: lightgreen;
+    color: black;
+  }
+
+  .Button button.Red {
+    background-color: red;
+  }
+
+  .Button button.Red:hover {
+    background-color: salmon;
+    color: black;
+  }

firstapp/src/Components/persons/Persons.js

@@ -0,0 +1,54 @@
+import React, {Component} from 'react'
+import Person from './person/Person'
+class Persons extends Component{
+  constructor(props){
+  super(props);
+  console.log('[Persons.js] Inside constructor', props);
+
+  }
+  componentWillMount() {
+  console.log('[Persons.js] Inside componentWillMount ');
+
+  }
+
+  componentDidMount(){
+    console.log('[Persons.js] Inside componentWillMount ');
+}
+
+    componentWillReceiveProps(nextProps){
+      console.log('[UPDATE Persons.js] Inside componentWillReceiveProps, nextProps');
+    }
+
+// shouldComponentUpdate(nextProps,nextState){
+//   console.log('[UPDATE Persons.js] Inside componentShouldUpdate, nextProps');
+//   return nextProps.persons !== this.props.persons ||
+//             nextProps.changed !== this.props.changed ||
+//             nextProps.clicked !== this.props.clicked;
+// }
+
+componentWillUpdate(nextProps,nextState){
+  console.log('Inside componentWillUpdate, nextProps');
+
+}
+
+componentDidUpdate(){
+  console.log('[UPDATE Persons.js] Inside ComponentDidUpdate ');
+}
+
+
+  render(){
+      console.log('[Persons.js] inside render');
+  return this.props.persons.map( (person, index) => {
+
+    return <Person
+
+      click={() =>   this.props.clicked(index)}
+      nimi={ person.nimi }
+      key={ person.id  }
+      changed={( event ) => this.props.changed( event, person.id )}
+        />
+
+  } );
+}
+}
+export default Persons;

firstapp/src/Components/persons/person/Person.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+import styles from './Person.module.css';
+
+class Person extends Component {
+  constructor(props){
+  super(props);
+  console.log('[Person.js] Inside constructor', props);
+
+  }
+  componentWillMount() {
+  console.log('[Person.js] Inside componentWillMount ');
+
+  }
+
+  componentDidMount(){
+    console.log('[Person.js] Inside componentWillMount ');
+  }
+  render(){
+      console.log('[Person.js] inside render');
+// const rnd = Math.random();
+// console.log('rnd:', rnd);
+// if ( rnd > 0.7 ) {
+//   throw new Error ( 'Something went wrong' );
+// }
+
+    return (
+        <div className={styles.Person}>
+            <p onClick={this.props.click}>I am {this.props.nimi} and I am {4} years old!</p>
+            <p>{this.props.children}</p>
+            <input type="text" onChange={this.props.changed} value={this.props.nimi} />
+        </div>
+    )
+};
+}
+
+export default Person;

firstapp/src/Components/persons/person/Person.module.css

@@ -0,0 +1,13 @@
+.Person {
+    width: 60%;
+    margin: 16px auto;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 3px #ccc;
+    padding: 16px;
+    text-align: center;
+}
+@media (min-width: 500px) {
+  .Person{
+      width: 450px;
+  }
+}