15 - The Basics of Props in React Components

codingforentrepreneurs · codingforentrepreneurs · commit 51dbdd060fe2 · 2020-09-14T12:26:10.000-07:00
diff --git a/index.html b/index.html
@@ -6,13 +6,6 @@
     <body>
         <h1>Hello world</h1>
         <div id='app'></div>
-        <button id='myBtn'>hello btn {btnClickCount}</button>
-        <script>
-            var btn = document.getElementById("myBtn")
-            btn.addEventListener('click', (event)=>{
-                alert("Button clicked.")
-            })
-            </script>
         <script src='index.js'></script>
     </body>
 </html>
diff --git a/index.js b/index.js
@@ -2,18 +2,31 @@ import React, {useState} from 'react'
 import ReactDOM from 'react-dom'
 
 
-const Btn = () =>{
-    const [clickCount, setClickCount] = useState(0)
+const BtnLabel = (props) =>{
+
+    return <span> - {props.count} </span>
+}
 
+const Btn = (props) =>{
+    const [clickCount, setClickCount] = useState(0)
+    console.log(props)
+    const shouldRenderCount = props.renderCount === true ? true : false
+    const renderCountLabel = shouldRenderCount === true ? <BtnLabel count={clickCount} /> : null
     const handleClick = (event) =>{
         // alert("btn in react")
         setClickCount(clickCount + 1)
     }
-    return <button onClick={handleClick} className={`class-${clickCount}`}>hello react btn</button>
+    return <button onClick={handleClick} className={`class-${clickCount}`}>hello react btn {renderCountLabel}</button>
 }
 
 const App = () => {
-    return <div>Hello world again.<Btn /></div>
+    return <div>Hello world again.
+        
+       <p> <Btn renderCount /></p>
+       <p> <Btn /></p>
+       <p> <Btn /></p>
+       <p> <Btn /></p>
+    </div>
 }
 
 const htmlElement = document.getElementById("app")
