Level 2 questions has been added

09_Day_Conditional_Rendering/09_conditional_rendering.md

@@ -34,7 +34,6 @@ import ReactDOM from 'react-dom'
 // class based component
 class Header extends React.Component {
   render() {
-    console.log(this.props.data)
     const {
       welcome,
       title,
@@ -44,7 +43,7 @@ class Header extends React.Component {
     } = this.props.data
 
     return (
-      <header style={this.props.styles}>
+      <header>
         <div className='header-wrapper'>
           <h1>{welcome}</h1>
           <h2>{title}</h2>
@@ -74,7 +73,7 @@ class App extends React.Component {
         firstName: 'Asabeneh',
         lastName: 'Yetayeh',
       },
-      date: 'Oct 7, 2020',
+      date: 'Oct 9, 2020',
     }
 
     // conditional rendering using if and else statement
@@ -140,7 +139,7 @@ class Header extends React.Component {
     } = this.props.data
 
     return (
-      <header style={this.props.styles}>
+      <header>
         <div className='header-wrapper'>
           <h1>{welcome}</h1>
           <h2>{title}</h2>
@@ -236,7 +235,6 @@ const buttonStyles = {
 // class based component
 class Header extends React.Component {
   render() {
-    console.log(this.props.data)
     const {
       welcome,
       title,
@@ -246,7 +244,7 @@ class Header extends React.Component {
     } = this.props.data
 
     return (
-      <header style={this.props.styles}>
+      <header>
         <div className='header-wrapper'>
           <h1>{welcome}</h1>
           <h2>{title}</h2>
@@ -337,7 +335,6 @@ const buttonStyles = {
 // class based component
 class Header extends React.Component {
   render() {
-    console.log(this.props.data)
     const {
       welcome,
       title,
@@ -347,7 +344,7 @@ class Header extends React.Component {
     } = this.props.data
 
     return (
-      <header style={this.props.styles}>
+      <header>
         <div className='header-wrapper'>
           <h1>{welcome}</h1>
           <h2>{title}</h2>
@@ -505,21 +502,25 @@ class App extends React.Component {
       date: 'Oct 9, 2020',
     }
 
-    const status = this.state.loggedIn ? <Welcome /> : <Login />
+    // We can destructure state
+
+    const { loggedIn, techs } = this.state
+
+    const status = loggedIn ? <Welcome /> : <Login />
 
     return (
       <div className='app'>
         <Header data={data} />
         {status}
         <Button
-          text={this.state.loggedIn ? 'Logout' : 'Login'}
+          text={loggedIn ? 'Logout' : 'Login'}
           style={buttonStyles}
           onClick={this.handleLogin}
         />
-        {this.state.techs.length === 3 && (
+        {techs.length === 3 && (
           <p>You have all the prerequisite courses to get started React</p>
         )}
-        {!this.state.loggedIn && (
+        {!loggedIn && (
           <p>
             Please login to access more information about 30 Days Of React
             challenge
@@ -738,7 +739,6 @@ class App extends React.Component {
       },
       date: 'Oct 9, 2020',
     }
-    const techs = ['HTML', 'CSS', 'JavaScript']
 
     return (
       <div className='app'>
@@ -776,7 +776,6 @@ ReactDOM.render(<App />, rootElement)
 1. Make a single page application which changes the body of the background based on the time of the day(Autumn, Winter, Spring, Summer)
 2. Make a single page application which change the body of the background based on the time of the day(Morning, Noon, Evening, Night)
 
-
 ### Exercises: Level 3
 
 Coming