File tree Expand file tree Collapse file tree 3 files changed +48
-0
lines changed Expand file tree Collapse file tree 3 files changed +48
-0
lines changed Original file line number Diff line number Diff line change @@ -770,6 +770,31 @@ export default () => (
770770
771771> https://reactjs.org/docs/hooks-intro.html
772772
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+
773798#### - useReducer
774799Hook for state management like Redux in a function component.
775800
Original file line number Diff line number Diff line change @@ -313,6 +313,14 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
313313
314314> https://reactjs.org/docs/hooks-intro.html
315315
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+
316324#### - useReducer
317325Hook for state management like Redux in a function component.
318326
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