Skip to content

Commit 51dbdd0

Browse files
15 - The Basics of Props in React Components
1 parent 4f99486 commit 51dbdd0

File tree

2 files changed

+17
-11
lines changed

2 files changed

+17
-11
lines changed

index.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
<body>
77
<h1>Hello world</h1>
88
<div id='app'></div>
9-
<button id='myBtn'>hello btn {btnClickCount}</button>
10-
<script>
11-
var btn = document.getElementById("myBtn")
12-
btn.addEventListener('click', (event)=>{
13-
alert("Button clicked.")
14-
})
15-
</script>
169
<script src='index.js'></script>
1710
</body>
1811
</html>

index.js

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,31 @@ import React, {useState} from 'react'
22
import ReactDOM from 'react-dom'
33

44

5-
const Btn = () =>{
6-
const [clickCount, setClickCount] = useState(0)
5+
const BtnLabel = (props) =>{
6+
7+
return <span> - {props.count} </span>
8+
}
79

10+
const Btn = (props) =>{
11+
const [clickCount, setClickCount] = useState(0)
12+
console.log(props)
13+
const shouldRenderCount = props.renderCount === true ? true : false
14+
const renderCountLabel = shouldRenderCount === true ? <BtnLabel count={clickCount} /> : null
815
const handleClick = (event) =>{
916
// alert("btn in react")
1017
setClickCount(clickCount + 1)
1118
}
12-
return <button onClick={handleClick} className={`class-${clickCount}`}>hello react btn</button>
19+
return <button onClick={handleClick} className={`class-${clickCount}`}>hello react btn {renderCountLabel}</button>
1320
}
1421

1522
const App = () => {
16-
return <div>Hello world again.<Btn /></div>
23+
return <div>Hello world again.
24+
25+
<p> <Btn renderCount /></p>
26+
<p> <Btn /></p>
27+
<p> <Btn /></p>
28+
<p> <Btn /></p>
29+
</div>
1730
}
1831

1932
const htmlElement = document.getElementById("app")

0 commit comments

Comments
 (0)