diff --git a/example/App/Accessible.js b/example/App/Accessible.js index a0eaa05..57cf590 100644 --- a/example/App/Accessible.js +++ b/example/App/Accessible.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useState, useCallback} from 'react'; import {Collapse} from '../../src'; export function Accessible() { @@ -9,10 +9,19 @@ export function Accessible() { button: 'accessible-marker-example2' }; - const [state, setState] = useState({ - isCheckboxCollapseOpen: false, - isButtonCollapseOpen: false - }); + const [isCheckboxCollapseOpen, setIsCheckboxCollapseOpen] = useState(false); + const [isButtonCollapseOpen, setIsButtonCollapseOpen] = useState(false); + + const onChange = useCallback( + ({target: {checked}}) => setIsCheckboxCollapseOpen(checked), + [setIsCheckboxCollapseOpen] + ); + + const onClick = useCallback( + () => setIsButtonCollapseOpen(!isButtonCollapseOpen), + [isButtonCollapseOpen] + ); + return (
@@ -27,11 +36,11 @@ export function Accessible() { className="input" type="checkbox" aria-controls={accessibilityIds.checkbox} - checked={state.isCheckboxCollapseOpen} - onChange={({target: {checked}}) => setState({isCheckboxCollapseOpen: checked})} /> + checked={isCheckboxCollapseOpen} + onChange={onChange} />
- +
@@ -43,14 +52,14 @@ export function Accessible() {
+ isOpened={isButtonCollapseOpen}>