Skip to content

Commit 877f71f

Browse files
sosukesuzukipiotrwitek
authored andcommitted
Add useState example (#128)
resolve #120
1 parent 4c670b5 commit 877f71f

File tree

3 files changed

+48
-0
lines changed

3 files changed

+48
-0
lines changed

Diff for: README.md

+25
Original file line numberDiff line numberDiff 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
774799
Hook for state management like Redux in a function component.
775800

Diff for: README_SOURCE.md

+8
Original file line numberDiff line numberDiff 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
317325
Hook for state management like Redux in a function component.
318326

Diff for: playground/src/hooks/use-state.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
}

0 commit comments

Comments
 (0)