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

Update Toggle.md

Browse Source
This commit is contained in:
Angelos Chalaris
2018-12-03 20:35:24 +02:00
committed by GitHub
parent 20b431295f
commit 7538a593ea
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
snippets/Toggle.md
View File

@ -2,11 +2,10 @@
Renders a toggle component. Renders a toggle component.
The `state` of the component default to `false` and bind the `handleClick` method to the component's context. Initialize `state.isToggleOn` to `false`, bind the `handleClick` 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, `handleClick`, which uses `Component.prototype.setState` to change the component's `state` from toggleOn to toggleOff and vice versa. Create a method, `handleClick`, which uses `Component.prototype.setState` to change the component's `state.toggleOn`.
In the `render()` method, destruct `state` and `style` to abbreviate typing, use a `<button>` that alters the component's `state`. In the `render()` method, destructure `state` and `style`, create a `<button>` that alters the component's `state` and determine the appearance of the content based on `state.isToggleOn`, applying the appropriate CSS rules from the `style` object.
Determine the appearance of the content, based on `state.isToggleOn` and apply the appropriate CSS rules from the `style` object.
```jsx ```jsx
class Toggle extends React.Component { class Toggle extends React.Component {
@ -53,6 +52,6 @@ class Toggle extends React.Component {
ReactDOM.render(<Toggle />, document.getElementById('root')); ReactDOM.render(<Toggle />, document.getElementById('root'));
``` ```
<!-- tags: visual,toggle,state,class --> <!-- tags: visual,state,class -->
<!-- expertise: 0 --> <!-- expertise: 0 -->