@@ -6,33 +6,29 @@ title: React Transition Group
6
6
## Mock
7
7
8
8
``` jsx
9
- import React from ' react'
9
+ import React , { useState } from ' react'
10
10
import { CSSTransition } from ' react-transition-group'
11
11
import { render , fireEvent } from ' @testing-library/react'
12
12
13
13
function Fade ({ children, ... props }) {
14
14
return (
15
- < CSSTransition {... props} timeout= {1000 } className = " fade" >
15
+ < CSSTransition {... props} timeout= {1000 } classNames = " fade" >
16
16
{children}
17
17
< / CSSTransition>
18
18
)
19
19
}
20
20
21
- class HiddenMessage extends React .Component {
22
- state = { show: this .props .initialShow || false }
23
- toggle = () => {
24
- this .setState (({ show }) => ({ show: ! show }))
25
- }
26
- render () {
27
- return (
28
- < div>
29
- < button onClick= {this .toggle }> Toggle< / button>
30
- < Fade in = {this .state .show }>
31
- < div> Hello world< / div>
32
- < / Fade>
33
- < / div>
34
- )
35
- }
21
+ function HiddenMessage ({ initialShow }) {
22
+ const [show , setShow ] = useState (initialShow || false )
23
+ const toggle = () => setShow (prevState => ! prevState)
24
+ return (
25
+ < div>
26
+ < button onClick= {toggle}> Toggle< / button>
27
+ < Fade in = {show}>
28
+ < div> Hello world< / div>
29
+ < / Fade>
30
+ < / div>
31
+ )
36
32
}
37
33
38
34
jest .mock (' react-transition-group' , () => {
@@ -66,27 +62,23 @@ import { render, fireEvent } from '@testing-library/react'
66
62
67
63
function Fade ({ children, ... props }) {
68
64
return (
69
- < CSSTransition {... props} timeout= {1000 } className = " fade" >
65
+ < CSSTransition {... props} timeout= {1000 } classNames = " fade" >
70
66
{children}
71
67
< / CSSTransition>
72
68
)
73
69
}
74
70
75
- class HiddenMessage extends React .Component {
76
- state = { show: this .props .initialShow || false }
77
- toggle = () => {
78
- this .setState (({ show }) => ({ show: ! show }))
79
- }
80
- render () {
81
- return (
82
- < div>
83
- < button onClick= {this .toggle }> Toggle< / button>
84
- < Fade in = {this .state .show }>
85
- < div> Hello world< / div>
86
- < / Fade>
87
- < / div>
88
- )
89
- }
71
+ function HiddenMessage ({ initialShow }) {
72
+ const [show , setShow ] = useState (initialShow || false )
73
+ const toggle = () => setShow (prevState => ! prevState)
74
+ return (
75
+ < div>
76
+ < button onClick= {toggle}> Toggle< / button>
77
+ < Fade in = {show}>
78
+ < div> Hello world< / div>
79
+ < / Fade>
80
+ < / div>
81
+ )
90
82
}
91
83
92
84
jest .mock (' react-transition-group' , () => {
0 commit comments