File tree Expand file tree Collapse file tree 2 files changed +17
-11
lines changed Expand file tree Collapse file tree 2 files changed +17
-11
lines changed Original file line number Diff line number Diff line change 6
6
< body >
7
7
< h1 > Hello world</ h1 >
8
8
< 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 >
16
9
< script src ='index.js '> </ script >
17
10
</ body >
18
11
</ html >
Original file line number Diff line number Diff line change @@ -2,18 +2,31 @@ import React, {useState} from 'react'
2
2
import ReactDOM from 'react-dom'
3
3
4
4
5
- const Btn = ( ) => {
6
- const [ clickCount , setClickCount ] = useState ( 0 )
5
+ const BtnLabel = ( props ) => {
6
+
7
+ return < span > - { props . count } </ span >
8
+ }
7
9
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
8
15
const handleClick = ( event ) => {
9
16
// alert("btn in react")
10
17
setClickCount ( clickCount + 1 )
11
18
}
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 >
13
20
}
14
21
15
22
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 >
17
30
}
18
31
19
32
const htmlElement = document . getElementById ( "app" )
You can’t perform that action at this time.
0 commit comments