Update Toggle

This commit is contained in:
Isabelle Viktoria Maciohsek
2020-09-06 14:48:13 +03:00
parent 3b074c301c
commit e7dd2358d0

View File

@ -5,14 +5,14 @@ tags: components,state,beginner
Renders a toggle component. Renders a toggle component.
- Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`. - Use the `React.useState()` to initialize the `isToggleOn` state variable to `defaultToggled`.
- 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.
- Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object. - Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
```jsx ```jsx
function Toggle(props) { const Toggle = ({ defaultToggled = false }) => {
const [isToggleOn, setIsToggleOn] = React.useState(false); const [isToggleOn, setIsToggleOn] = React.useState(defaultToggled);
style = { const style = {
on: { on: {
backgroundColor: 'green' backgroundColor: 'green'
}, },
@ -26,7 +26,7 @@ function Toggle(props) {
{isToggleOn ? 'ON' : 'OFF'} {isToggleOn ? 'ON' : 'OFF'}
</button> </button>
); );
} };
``` ```
```jsx ```jsx