File tree 3 files changed +48
-0
lines changed
3 files changed +48
-0
lines changed Original file line number Diff line number Diff line change @@ -770,6 +770,31 @@ export default () => (
770
770
771
771
> https://reactjs.org/docs/hooks-intro.html
772
772
773
+ #### - useState
774
+
775
+ > https://reactjs.org/docs/hooks-reference.html#usestate
776
+
777
+ ` ` ` tsx
778
+ import * as React from ' react' ;
779
+
780
+ type Props = { initialCount: number };
781
+
782
+ export default function Counter({initialCount }: Props ) {
783
+ const [count, setCount] = React .useState (initialCount );
784
+ return (
785
+ <>
786
+ Count: { count }
787
+ <button onClick = { () => setCount (initialCount )} >Reset</button >
788
+ <button onClick = { () => setCount (prevCount => prevCount + 1 )} >+</button >
789
+ <button onClick = { () => setCount (prevCount => prevCount - 1 )} >-</button >
790
+ </>
791
+ );
792
+ }
793
+
794
+ ` ` `
795
+
796
+ [⇧ back to top](#table-of-contents)
797
+
773
798
#### - useReducer
774
799
Hook for state management like Redux in a function component.
775
800
Original file line number Diff line number Diff line change @@ -313,6 +313,14 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
313
313
314
314
> https://reactjs.org/docs/hooks-intro.html
315
315
316
+ #### - useState
317
+
318
+ > https://reactjs.org/docs/hooks-reference.html#usestate
319
+
320
+ ::codeblock='playground/src/hooks/use-state.tsx'::
321
+
322
+ [⇧ back to top](#table-of-contents)
323
+
316
324
#### - useReducer
317
325
Hook for state management like Redux in a function component.
318
326
Original file line number Diff line number Diff line change
1
+ import * as React from 'react' ;
2
+
3
+ type Props = { initialCount : number } ;
4
+
5
+ export default function Counter ( { initialCount} : Props ) {
6
+ const [ count , setCount ] = React . useState ( initialCount ) ;
7
+ return (
8
+ < >
9
+ Count: { count }
10
+ < button onClick = { ( ) => setCount ( initialCount ) } > Reset</ button >
11
+ < button onClick = { ( ) => setCount ( prevCount => prevCount + 1 ) } > +</ button >
12
+ < button onClick = { ( ) => setCount ( prevCount => prevCount - 1 ) } > -</ button >
13
+ </ >
14
+ ) ;
15
+ }
You can’t perform that action at this time.
0 commit comments