ternary operator use

02/src/App.js

@@ -2,7 +2,8 @@ import React from 'react';
 import './App.css';
 import Person from './Person/Person';
 
-// // ## Functional code generated by creat-react-app ##
+
+/* // ## Functional code generated by creat-react-app ##
 // function App() {
 //   return (
 //     <div className="App">
@@ -16,8 +17,9 @@ import Person from './Person/Person';
 //   );
 //   // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
 // }
+*/
 
-// // ## Functional code created using ES6 (React Hooks) ##
+/* // ## Functional code created using ES6 (React Hooks) ##
 // const App = props => {
 //   const [charState, setCharState] = React.useState({
 //     character: [
@@ -62,6 +64,12 @@ import Person from './Person/Person';
 //     );
 // // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
 // }
+*/
+
+/* // ## What's behind each JSX tag ##
+// render() {
+//   return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
+// }*/
 
 
 // ## OOP code ##
@@ -72,7 +80,8 @@ class App extends React.Component {
       { name: 'char2', ilvl: 110 },
       { name: 'char3', ilvl: 78 }
     ],
-    somethingElse: 'something something'
+    somethingElse: 'something something',
+    showOrHide: false
   }
 
   switchNameHandler = () => {
@@ -98,43 +107,56 @@ class App extends React.Component {
     })
   }
 
+  showOrHide = () => {
+    const doesShow = this.state.showOrHide
+    this.setState({showOrHide: !doesShow})
+  }
+
   render() {
     const style = {
       backgroundColor: 'white',
       font: 'inherit',
       border: '1px solid blue',
       padding: '8px',
+      margin: '10px',
       cursor: 'pointer'
     };
 
     return (
-      <div className="App">
+      <div className='App'>
         <h1>Hi, I'm a React App, I'm cute.</h1>
         <p>Created using OOP code</p>
         <button 
           style={style}
-          onClick={() => this.switchNameHandler()}>Switch Char</button>
-        <Person
-          name={this.state.character[0].name}
-          ilvl={this.state.character[0].ilvl}
-        />
-        <Person
-          name={this.state.character[1].name}
-          ilvl={this.state.character[1].ilvl}
-          click={this.switchNameHandler.bind(this, 'Schwarzgeist')}
-          changed={this.nameChangedHandler}
-        />
-        <Person
-          name={this.state.character[2].name}
-          ilvl={this.state.character[2].ilvl}
-        />
-        {/* <br />
-        <Person name="Yutsuo" ilvl="320">Main Character</Person>
-        <Person name="Schwarzgeist" ilvl="200" />
-        <Person name="Murom" ilvl="78" /> */}
+          onClick={() => this.switchNameHandler()}>
+            Switch Char
+        </button>
+        <button
+          style={style}
+          onClick={this.showOrHide} >
+          {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'}
+        </button>
+        {this.state.showOrHide 
+        ?
+          <div>
+          <Person
+            name={this.state.character[0].name}
+            ilvl={this.state.character[0].ilvl}
+          />
+          <Person
+            name={this.state.character[1].name}
+            ilvl={this.state.character[1].ilvl}
+            click={this.switchNameHandler.bind(this, 'Schwarzgeist')}
+            changed={this.nameChangedHandler}
+          />
+          <Person
+            name={this.state.character[2].name}
+            ilvl={this.state.character[2].ilvl}
+          />
+          </div> : null
+        }
       </div>
     );
-    // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
   }
 }