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

change collapse component to hooks implementation

Browse Source
This commit is contained in:
komv8i
2019-02-07 14:23:46 -05:00
parent 509f7e87fa
commit 0eeac148c6
1 changed files with 33 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
snippets/Collapse.md
View File

@ -5,52 +5,46 @@ Renders a component with collapsible content.
Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded). Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).
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` to change the component's `state` from collapsed to expanded and vice versa.
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`. 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.
```jsx ```jsx
class Collapse extends React.Component { const style = {
constructor(props) {
super(props);
this.state = {
collapsed: !!props.collapsed
};
this.style = {
collapsed: { collapsed: {
display: 'none' display: "none"
}, },
expanded: { expanded: {
display: 'block' display: "block"
}, },
buttonStyle: { buttonStyle: {
display: 'block', display: "block",
width: '100%' width: "100%"
} }
};
function Collapse(props) {
const [isCollapsed, setCollapsed] = useState(props.collapsed);
const toggleCollapse = () => {
setCollapsed(!isCollapsed);
}; };
this.toggleCollapse = this.toggleCollapse.bind(this);
}
toggleCollapse() {
this.setState(state => ({ collapsed: !state.collapsed }));
}
render() {
return ( return (
<div> <div>
<button style={this.style.buttonStyle} onClick={this.toggleCollapse}> <button style={style.buttonStyle} onClick={() => toggleCollapse()}>
{this.state.collapsed ? 'Show' : 'Hide'} content {isCollapsed ? "Show" : "Hide"} content
</button> </button>
<div <div
style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} className="collapse-content"
aria-expanded = {this.state.collapsed} style={isCollapsed ? style.collapsed : style.expanded}
aria-expanded={isCollapsed}
> >
{this.props.children} {props.children}
</div> </div>
</div> </div>
); );
}
} }
``` ```