andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Collapse.md

Browse Source
This commit is contained in:
Angelos Chalaris
2018-10-17 21:06:20 +03:00
committed by GitHub
parent 033008277a
commit ca68e94b27
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/Collapse.md
View File

@ -6,7 +6,7 @@ Use the value of the `collapsed` prop to determine the initial state of the cont
Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context. Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.
Use an object, `style`, to hold the styles for individual components and their states. Use an object, `style`, to hold the styles for individual components and their states.
Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa. Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
In the `render()` method, use a `React.Fragment` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`. In the `render()` method, use a `<div>` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object. Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible. Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
@ -64,6 +64,6 @@ ReactDOM.render(
); );
``` ```
<!-- tags: visual,children,state,fragment,class --> <!-- tags: visual,children,state,class -->
<!-- expertise: 2 --> <!-- expertise: 2 -->