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

Merge pull request #47 from phaniteja1/collapse

Browse Source 
change collapse component to hooks implementation
This commit is contained in:
Angelos Chalaris
2019-02-12 20:25:06 +02:00
committed by GitHub
parent 28f0a303a4 6831b872a2
commit ba97bd01b1
1 changed files with 36 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
snippets/Collapse.md
View File

@ -2,55 +2,46 @@
Renders a component with collapsible content. 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 `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
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. Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` 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 `isCollapsed` 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 `isCollapsed` 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 { function Collapse(props) {
constructor(props) { const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);
super(props);
this.state = {
collapsed: !!props.collapsed
};
this.style = {
collapsed: {
display: 'none'
},
expanded: {
display: 'block'
},
buttonStyle: {
display: 'block',
width: '100%'
}
};
this.toggleCollapse = this.toggleCollapse.bind(this);
}
toggleCollapse() { const style = {
this.setState(state => ({ collapsed: !state.collapsed })); collapsed: {
} display: "none"
},
expanded: {
display: "block"
},
buttonStyle: {
display: "block",
width: "100%"
}
};
render() { return (
return ( <div>
<div> <button
<button style={this.style.buttonStyle} onClick={this.toggleCollapse}> style={style.buttonStyle}
{this.state.collapsed ? 'Show' : 'Hide'} content onClick={() => setIsCollapsed(!isCollapsed)}
</button> >
<div {isCollapsed ? "Show" : "Hide"} content
style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} </button>
aria-expanded = {this.state.collapsed} <div
> className="collapse-content"
{this.props.children} style={isCollapsed ? style.collapsed : style.expanded}
</div> aria-expanded={isCollapsed}
>
{props.children}
</div> </div>
); </div>
} );
} }
``` ```