+ )
+ }
+}
+Usage.title = 'Control Props'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/11.extra-1.js b/src/exercises-final/11.extra-1.js
new file mode 100644
index 0000000..aa2ac89
--- /dev/null
+++ b/src/exercises-final/11.extra-1.js
@@ -0,0 +1,69 @@
+// The provider pattern
+// Extra credit: Validate the consumer is rendered within a provider
+import React, {Fragment} from 'react'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+function ToggleConsumer(props) {
+ return (
+
+ {context => {
+ if (!context) {
+ throw new Error(
+ `Toggle.Consumer cannot be rendered outside the Toggle component`,
+ )
+ }
+ return props.children(context)
+ }}
+
+ )
+}
+
+class Toggle extends React.Component {
+ static Consumer = ToggleConsumer
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ render() {
+ return (
+
+ )
+ }
+}
+
+const Layer1 = () =>
+const Layer2 = () => (
+
+ {({on}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+ )}
+
+)
+const Layer3 = () =>
+const Layer4 = () => (
+
+ {({on, toggle}) => }
+
+)
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/11.extra-2.js b/src/exercises-final/11.extra-2.js
new file mode 100644
index 0000000..1d2a2df
--- /dev/null
+++ b/src/exercises-final/11.extra-2.js
@@ -0,0 +1,66 @@
+// The provider pattern
+// Extra credit: avoid unecessary re-renders by only updating the value when state changes
+import React, {Fragment} from 'react'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+function ToggleConsumer(props) {
+ return (
+
+ {context => {
+ if (!context) {
+ throw new Error(
+ `Toggle.Consumer cannot be rendered outside the Toggle component`,
+ )
+ }
+ return props.children(context)
+ }}
+
+ )
+}
+
+class Toggle extends React.Component {
+ static Consumer = ToggleConsumer
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ state = {on: false, toggle: this.toggle}
+ render() {
+ return (
+
+ )
+ }
+}
+
+const Layer1 = () =>
+const Layer2 = () => (
+
+ {({on}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+ )}
+
+)
+const Layer3 = () =>
+const Layer4 = () => (
+
+ {({on, toggle}) => }
+
+)
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/11.extra-3.js b/src/exercises-final/11.extra-3.js
new file mode 100644
index 0000000..fb87991
--- /dev/null
+++ b/src/exercises-final/11.extra-3.js
@@ -0,0 +1,71 @@
+// The provider pattern
+// Extra credit: support render props
+import React, {Fragment} from 'react'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+function ToggleConsumer(props) {
+ return (
+
+ {context => {
+ if (!context) {
+ throw new Error(
+ `Toggle.Consumer cannot be rendered outside the Toggle component`,
+ )
+ }
+ return props.children(context)
+ }}
+
+ )
+}
+
+class Toggle extends React.Component {
+ static Consumer = ToggleConsumer
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ state = {on: false, toggle: this.toggle}
+ render() {
+ const {children, ...rest} = this.props
+ const ui =
+ typeof children === 'function' ? children(this.state) : children
+ return (
+
+ {ui}
+
+ )
+ }
+}
+
+const Layer1 = () =>
+const Layer2 = () => (
+
+ {({on}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+ )}
+
+)
+const Layer3 = () =>
+const Layer4 = () => (
+
+ {({on, toggle}) => }
+
+)
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/11.extra-4.js b/src/exercises-final/11.extra-4.js
new file mode 100644
index 0000000..c07a392
--- /dev/null
+++ b/src/exercises-final/11.extra-4.js
@@ -0,0 +1,81 @@
+// The provider pattern
+// Extra credit: support (and expose) compound components
+import React, {Fragment} from 'react'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+function ToggleConsumer(props) {
+ return (
+
+ {context => {
+ if (!context) {
+ throw new Error(
+ `Toggle.Consumer cannot be rendered outside the Toggle component`,
+ )
+ }
+ return props.children(context)
+ }}
+
+ )
+}
+
+class Toggle extends React.Component {
+ static Consumer = ToggleConsumer
+ static On = ({children}) => (
+
+ {({on}) => (on ? children : null)}
+
+ )
+ static Off = ({children}) => (
+
+ {({on}) => (on ? null : children)}
+
+ )
+ static Button = props => (
+
+ {({on, toggle}) => (
+
+ )}
+
+ )
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ state = {on: false, toggle: this.toggle}
+ render() {
+ const {children, ...rest} = this.props
+ const ui =
+ typeof children === 'function' ? children(this.state) : children
+ return (
+
+ {ui}
+
+ )
+ }
+}
+
+const Layer1 = () =>
+const Layer2 = () => (
+
+ The button is on
+ The button is off
+
+
+)
+const Layer3 = () =>
+const Layer4 = () =>
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/11.js b/src/exercises-final/11.js
new file mode 100644
index 0000000..6833341
--- /dev/null
+++ b/src/exercises-final/11.js
@@ -0,0 +1,54 @@
+// The provider pattern
+import React, {Fragment} from 'react'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+class Toggle extends React.Component {
+ static Consumer = ToggleContext.Consumer
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ render() {
+ return (
+
+ )
+ }
+}
+
+const Layer1 = () =>
+const Layer2 = () => (
+
+ {({on}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+ )}
+
+)
+const Layer3 = () =>
+const Layer4 = () => (
+
+ {({on, toggle}) => }
+
+)
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+Usage.title = 'Provider Pattern'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises-final/12.js b/src/exercises-final/12.js
new file mode 100644
index 0000000..1a3fcdc
--- /dev/null
+++ b/src/exercises-final/12.js
@@ -0,0 +1,61 @@
+// higher order components
+import React, {Fragment} from 'react'
+import hoistNonReactStatics from 'hoist-non-react-statics'
+import {Switch} from '../switch'
+
+const ToggleContext = React.createContext()
+
+class Toggle extends React.Component {
+ static Consumer = ToggleContext.Consumer
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ state = {on: false, toggle: this.toggle}
+ render() {
+ return (
+
+ )
+ }
+}
+
+function withToggle(Component) {
+ function Wrapper(props, ref) {
+ return (
+
+ {toggleContext => (
+
+ )}
+
+ )
+ }
+ Wrapper.displayName = `withToggle(${Component.displayName ||
+ Component.name})`
+ return hoistNonReactStatics(React.forwardRef(Wrapper), Component)
+}
+
+const Layer1 = () =>
+const Layer2 = withToggle(({toggle: {on}}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+))
+const Layer3 = () =>
+const Layer4 = withToggle(({toggle: {on, toggle}}) => (
+
+))
+
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+
+
+ )
+}
+Usage.title = 'Higher Order Components'
+
+export {Toggle, withToggle, Usage as default}
diff --git a/src/exercises/01.js b/src/exercises/01.js
new file mode 100644
index 0000000..c5204d6
--- /dev/null
+++ b/src/exercises/01.js
@@ -0,0 +1,36 @@
+// Building the toggle component
+
+import React from 'react'
+// 🐨 uncomment this import to get the switch component.
+// It takes an `onClick` and an `on` prop
+// import {Switch} from '../switch'
+
+class Toggle extends React.Component {
+ // 🐨 this toggle component is going to need to have state for `on`
+ //
+ // You'll also want a method to handle when the switch is clicked
+ // which will update the `on` state and call the `onToggle` prop
+ // with the new `on` state.
+ //
+ // 💰 this.setState(newState, callback)
+ //
+ // The `callback` should be where you call `this.props.onToggle(this.state.on)`
+ //
+ // 💯 Use a state updater function for `newState` to avoid issues with batching
+ render() {
+ // 🐨 here you'll want to return the switch with the `on` and `onClick` props
+ return null
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return
+}
+Usage.title = 'Build Toggle'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/02.js b/src/exercises/02.js
new file mode 100644
index 0000000..e724442
--- /dev/null
+++ b/src/exercises/02.js
@@ -0,0 +1,60 @@
+// Compound Components
+
+import React from 'react'
+import {Switch} from '../switch'
+
+class Toggle extends React.Component {
+ // you can create function components as static properties!
+ // for example:
+ // static Candy = (props) =>
CANDY! {props.children}
+ // Then that could be used like:
+ // This is handy because it makes the relationship between the
+ // parent Toggle component and the child Candy component more explicit
+ // 🐨 You'll need to create three such components here: On, Off, and Button
+ // The button will be responsible for rendering the (with the right props)
+ // 💰 Combined with changes you'll make in the `render` method, these should
+ // be able to accept `on`, `toggle`, and `children` as props.
+ // Note that they will _not_ have access to Toggle instance properties
+ // like `this.state.on` or `this.toggle`.
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ render() {
+ // we're trying to let people render the components they want within the Toggle component.
+ // But the On, Off, and Button components will need access to the internal `on` state as
+ // well as the internal `toggle` function for them to work properly. So here we can
+ // take all this.props.children and make a copy of them that has those props.
+ //
+ // To do this, you can use:
+ // 1. React.Children.map: https://reactjs.org/docs/react-api.html#reactchildrenmap
+ // 2. React.cloneElement: https://reactjs.org/docs/react-api.html#cloneelement
+ //
+ // 🐨 you'll want to completely replace the code below with the above logic.
+ const {on} = this.state
+ return
+ }
+}
+
+// 💯 Support rendering non-Toggle components within Toggle without incurring warnings in the console.
+// for example, try to render a Hello inside
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+ The button is on
+ The button is off
+
+
+ )
+}
+Usage.title = 'Compound Components'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/03.js b/src/exercises/03.js
new file mode 100644
index 0000000..6be006f
--- /dev/null
+++ b/src/exercises/03.js
@@ -0,0 +1,104 @@
+// Flexible Compound Components with context
+
+import React from 'react'
+import {Switch} from '../switch'
+
+// Right now our component can only clone and pass props to immediate children.
+// So we need some way for our compound components to implicitly accept the on
+// state and toggle method regardless of where they're rendered within the
+// Toggle component's "posterity" :)
+//
+// The way we do this is through context. React.createContext is the API we
+// want. Here's a simple example of that API:
+//
+// const defaultValue = 'light'
+// const ThemeContext = React.createContext(defaultValue)
+// Note: The `defaultValue` can be an object, function, or anything.
+// It's simply what React will use if the ThemeContext.Consumer is rendered
+// outside a ThemeContext.Provider
+// In our situation, it wouldn't make sense to render a Consumer outside a
+// Provider, so you don't have to specify a defaultValue. One of the extra
+// credit items shows how to throw a helpful error message if someone attempts
+// to render a Consumer without a Provider.
+//
+// ...
+//
+// {this.props.children}
+//
+// ...
+//
+// ...
+//
+// {contextValue =>
The current theme is: {contextValue}
}
+//
+// ...
+//
+// NOTE: Spacing matters!! For example, these are not the same:
+// {val => val}
+// {val => val}
+//
+// To visualize the difference, here's what these would be with a named children prop:
+// val}, ' ']} />
+// val} />
+// make sure that you don't have the extra space in there
+// (newlines are ok, like in the above example)
+
+// 🐨 create a ToggleContext with React.createContext here
+
+class Toggle extends React.Component {
+ // 🐨 each of these compound components will need to be changed to use
+ // ToggleContext.Consumer and rather than getting `on` and `toggle`
+ // from props, it'll get it from the ToggleContext.Consumer value.
+ static On = ({on, children}) => (on ? children : null)
+ static Off = ({on, children}) => (on ? null : children)
+ static Button = ({on, toggle, ...props}) => (
+
+ )
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ render() {
+ // Because this.props.children is _immediate_ children only, we need
+ // to 🐨 remove this map function and render our context provider with
+ // this.props.children as the children of the provider. Then we'll
+ // expose the `on` state and `toggle` method as properties in the context
+ // value (the value prop).
+
+ return React.Children.map(this.props.children, child =>
+ React.cloneElement(child, {
+ on: this.state.on,
+ toggle: this.toggle,
+ }),
+ )
+ }
+}
+
+// 💯 Extra credit: rather than having a default value, make it so the consumer
+// will throw an error if there's no context value to make sure people don't
+// attempt to render one of the compound components outside the Toggle.
+// 💯 Extra credit: avoid unecessary re-renders of the consumers by not
+// creating a new `value` object ever render and instead passing an object
+// which only changes when the state changes.
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+ The button is on
+ The button is off
+
+
+
+
+ )
+}
+Usage.title = 'Flexible Compound Components'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/04.js b/src/exercises/04.js
new file mode 100644
index 0000000..22f4eaf
--- /dev/null
+++ b/src/exercises/04.js
@@ -0,0 +1,51 @@
+// render props
+
+import React from 'react'
+import {Switch} from '../switch'
+
+// we're back to basics here. Rather than compound components,
+// let's use a render prop!
+class Toggle extends React.Component {
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => {
+ this.props.onToggle(this.state.on)
+ },
+ )
+ render() {
+ const {on} = this.state
+ // We want to give rendering flexibility, so we'll be making
+ // a change to our render prop component here.
+ // You'll notice the children prop in the Usage component
+ // is a function. 🐨 So you can replace this with a call this.props.children()
+ // But you'll need to pass it an object with `on` and `toggle`.
+ return
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+ {({on, toggle}) => (
+
+ {on ? 'The button is on' : 'The button is off'}
+
+
+
+
+ )}
+
+ )
+}
+Usage.title = 'Render Props'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/05.js b/src/exercises/05.js
new file mode 100644
index 0000000..6674ecb
--- /dev/null
+++ b/src/exercises/05.js
@@ -0,0 +1,55 @@
+// prop collections
+
+import React from 'react'
+import {Switch} from '../switch'
+
+class Toggle extends React.Component {
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ getStateAndHelpers() {
+ return {
+ on: this.state.on,
+ toggle: this.toggle,
+ // In our last usage example, you'll notice that we had some
+ // common props (`onClick`, and we're also missing `aria-pressed`
+ // value on the `button`). Because most users will want these
+ // props applied to the button they render, we can add a collection
+ // of props as a convenience for them.
+ //
+ // 🐨 Add a `togglerProps` object that has an `aria-pressed` (should
+ // be set to the value of the `on` state), and an `onClick` assigned
+ // to the toggle function.
+ }
+ }
+ render() {
+ return this.props.children(this.getStateAndHelpers())
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+}) {
+ return (
+
+ {({on, togglerProps}) => (
+
+
+
+
+
+ )}
+
+ )
+}
+Usage.title = 'Prop Collections'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/06.js b/src/exercises/06.js
new file mode 100644
index 0000000..52446c4
--- /dev/null
+++ b/src/exercises/06.js
@@ -0,0 +1,69 @@
+// prop getters
+
+import React from 'react'
+import {Switch} from '../switch'
+
+// Check out the previous usage example. How would someone pass
+// a custom `onClick` handler? It'd be pretty tricky! It'd be
+// easier to just not use the `togglerProps` prop collection!
+//
+// What if instead we exposed a function which merged props?
+// Let's do that instead. 🐨 Swap `togglerProps` with a `getTogglerProps`
+// function. It should accept props and merge the provided props
+// with the ones we need to get our toggle functionality to work
+//
+// 💰 Here's a little utility that might come in handy
+// const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
+
+class Toggle extends React.Component {
+ state = {on: false}
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ getStateAndHelpers() {
+ return {
+ on: this.state.on,
+ toggle: this.toggle,
+ togglerProps: {
+ 'aria-pressed': this.state.on,
+ onClick: this.toggle,
+ },
+ }
+ }
+ render() {
+ return this.props.children(this.getStateAndHelpers())
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ onToggle = (...args) => console.log('onToggle', ...args),
+ onButtonClick = () => console.log('onButtonClick'),
+}) {
+ return (
+
+ {({on, getTogglerProps}) => (
+
+
+
+
+
+ )}
+
+ )
+}
+Usage.title = 'Prop Getters'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/07.js b/src/exercises/07.js
new file mode 100644
index 0000000..c2d40c4
--- /dev/null
+++ b/src/exercises/07.js
@@ -0,0 +1,72 @@
+// State Initializers
+
+import React from 'react'
+import {Switch} from '../switch'
+
+const callAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn && fn(...args))
+
+class Toggle extends React.Component {
+ // 🐨 We're going to need some static defaultProps here to allow
+ // people to pass a `initialOn` prop.
+ //
+ // 🐨 Rather than initializing state to have on as false,
+ // set on to this.props.initialOn
+ state = {on: false}
+
+ // 🐨 now let's add a reset method here that resets the state
+ // to the initial state. Then add a callback that calls
+ // this.props.onReset with the `on` state.
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ getTogglerProps = ({onClick, ...props} = {}) => {
+ return {
+ 'aria-pressed': this.state.on,
+ onClick: callAll(onClick, this.toggle),
+ ...props,
+ }
+ }
+ getStateAndHelpers() {
+ return {
+ on: this.state.on,
+ toggle: this.toggle,
+ // 🐨 now let's include the reset method here
+ // so folks can use that in their implementation.
+ getTogglerProps: this.getTogglerProps,
+ }
+ }
+ render() {
+ return this.props.children(this.getStateAndHelpers())
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+function Usage({
+ initialOn = false,
+ onToggle = (...args) => console.log('onToggle', ...args),
+ onReset = (...args) => console.log('onReset', ...args),
+}) {
+ return (
+
+ {({getTogglerProps, on, reset}) => (
+
+
+
+
+
+ )}
+
+ )
+}
+Usage.title = 'State Initializers'
+
+export {Toggle, Usage as default}
diff --git a/src/exercises/08.js b/src/exercises/08.js
new file mode 100644
index 0000000..db081ec
--- /dev/null
+++ b/src/exercises/08.js
@@ -0,0 +1,149 @@
+// state reducer
+
+import React from 'react'
+import {Switch} from '../switch'
+
+const callAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn && fn(...args))
+
+// Render props allow users to be in control over the UI based on state.
+// State reducers allow users to be in control over logic based on actions.
+// This idea is similar to redux, but only coincidentally.
+//
+// The basic idea is that any time there's an internal change in state, we
+// first call a stateReducer prop with the current state and the changes.
+// Whatever is returned is what we use in our setState call.
+// This allows users of the component to return the changes they received
+// or to modify the changes as they need.
+//
+// What this means for our implementation is that we can create a single
+// function that does all the work before calling setState. Then we can
+// replace all calls to setState with that function.
+//
+// Learn more about the state reducers pattern here:
+// https://blog.kentcdodds.com/b40316cfac57
+
+class Toggle extends React.Component {
+ static defaultProps = {
+ initialOn: false,
+ onReset: () => {},
+ // 🐨 let's add a default stateReducer here. It should return
+ // the changes object as it is passed.
+ }
+ initialState = {on: this.props.initialOn}
+ state = this.initialState
+ // 🐨 let's add a method here called `internalSetState`. It will simulate
+ // the same API as `setState(updater, callback)`:
+ // - updater: (changes object or function that returns the changes object)
+ // - callback: Function called after the state has been updated
+ // This will call setState with an updater function (a function that receives the state).
+ // If the changes are a function, then call that function with the state to get the actual changes
+ //
+ // 🐨 Call this.props.stateReducer with the `state` and `changes` to get the user changes.
+ //
+ // 🐨 Then, if the returned value exists and has properties, return that from your updater function.
+ // If it does not exist or is an empty object, then return null (avoids an unecessary re-render).
+ //
+ // 🐨 Pass the callback to the 2nd argument to this.setState
+ //
+ // 🐨 Finally, update all pre-existing instances of this.setState
+ // to this.internalSetState
+ reset = () =>
+ this.setState(this.initialState, () =>
+ this.props.onReset(this.state.on),
+ )
+ toggle = () =>
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ getTogglerProps = ({onClick, ...props} = {}) => ({
+ onClick: callAll(onClick, this.toggle),
+ 'aria-pressed': this.state.on,
+ ...props,
+ })
+ getStateAndHelpers() {
+ return {
+ on: this.state.on,
+ toggle: this.toggle,
+ reset: this.reset,
+ getTogglerProps: this.getTogglerProps,
+ }
+ }
+ render() {
+ return this.props.children(this.getStateAndHelpers())
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+class Usage extends React.Component {
+ static defaultProps = {
+ onToggle: (...args) => console.log('onToggle', ...args),
+ onReset: (...args) => console.log('onReset', ...args),
+ }
+ initialState = {timesClicked: 0}
+ state = this.initialState
+ handleToggle = (...args) => {
+ this.setState(({timesClicked}) => ({
+ timesClicked: timesClicked + 1,
+ }))
+ this.props.onToggle(...args)
+ }
+ handleReset = (...args) => {
+ this.setState(this.initialState)
+ this.props.onReset(...args)
+ }
+ toggleStateReducer = (state, changes) => {
+ if (this.state.timesClicked >= 4) {
+ return {...changes, on: false}
+ }
+ return changes
+ }
+ render() {
+ const {timesClicked} = this.state
+ return (
+
+ {toggle => (
+
+
+ {timesClicked > 4 ? (
+
+ Whoa, you clicked too much!
+
+
+ ) : timesClicked > 0 ? (
+
+ Click count: {timesClicked}
+
+ ) : null}
+
+
+ )}
+
+ )
+ }
+}
+Usage.title = 'State Reducers'
+
+export {Toggle, Usage as default}
+
+/* eslint
+"no-unused-vars": [
+ "warn",
+ {
+ "argsIgnorePattern": "^_.+|^ignore.+",
+ "varsIgnorePattern": "^_.+|^ignore.+",
+ "args": "after-used"
+ }
+]
+ */
diff --git a/src/exercises/09.js b/src/exercises/09.js
new file mode 100644
index 0000000..da7dbe8
--- /dev/null
+++ b/src/exercises/09.js
@@ -0,0 +1,145 @@
+// state reducer with types
+
+import React from 'react'
+import {Switch} from '../switch'
+
+const callAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn && fn(...args))
+
+class Toggle extends React.Component {
+ static defaultProps = {
+ initialOn: false,
+ onReset: () => {},
+ stateReducer: (state, changes) => changes,
+ }
+ initialState = {on: this.props.initialOn}
+ state = this.initialState
+ internalSetState(changes, callback) {
+ this.setState(state => {
+ // handle function setState call
+ const changesObject =
+ typeof changes === 'function' ? changes(state) : changes
+ // apply state reducer
+ const reducedChanges =
+ this.props.stateReducer(state, changesObject) || {}
+ // 🐨 in addition to what we've done, let's pluck off the `type`
+ // property and return an object only if the state changes
+ // 💰 to remove the `type`, you can destructure the changes:
+ // `{type, ...c}`
+ return Object.keys(reducedChanges).length
+ ? reducedChanges
+ : null
+ }, callback)
+ }
+ reset = () =>
+ // 🐨 add a `type` string property to this call
+ this.internalSetState(this.initialState, () =>
+ this.props.onReset(this.state.on),
+ )
+ // 🐨 accept a `type` property here and give it a default value
+ toggle = () =>
+ this.internalSetState(
+ // pass the `type` string to this object
+ ({on}) => ({on: !on}),
+ () => this.props.onToggle(this.state.on),
+ )
+ getTogglerProps = ({onClick, ...props} = {}) => ({
+ // 🐨 change `this.toggle` to `() => this.toggle()`
+ // to avoid passing the click event to this.toggle.
+ onClick: callAll(onClick, this.toggle),
+ 'aria-pressed': this.state.on,
+ ...props,
+ })
+ getStateAndHelpers() {
+ return {
+ on: this.state.on,
+ toggle: this.toggle,
+ reset: this.reset,
+ getTogglerProps: this.getTogglerProps,
+ }
+ }
+ render() {
+ return this.props.children(this.getStateAndHelpers())
+ }
+}
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+class Usage extends React.Component {
+ static defaultProps = {
+ onToggle: (...args) => console.log('onToggle', ...args),
+ onReset: (...args) => console.log('onReset', ...args),
+ }
+ initialState = {timesClicked: 0}
+ state = this.initialState
+ handleToggle = (...args) => {
+ this.setState(({timesClicked}) => ({
+ timesClicked: timesClicked + 1,
+ }))
+ this.props.onToggle(...args)
+ }
+ handleReset = (...args) => {
+ this.setState(this.initialState)
+ this.props.onReset(...args)
+ }
+ toggleStateReducer = (state, changes) => {
+ if (changes.type === 'forced') {
+ return changes
+ }
+ if (this.state.timesClicked >= 4) {
+ return {...changes, on: false}
+ }
+ return changes
+ }
+ render() {
+ const {timesClicked} = this.state
+ return (
+
+ {({on, toggle, reset, getTogglerProps}) => (
+
+
+ {timesClicked > 4 ? (
+
+ Whoa, you clicked too much!
+
+
+
+
+ ) : timesClicked > 0 ? (
+
+ Click count: {timesClicked}
+
+ ) : null}
+
+
+ )}
+
+ )
+ }
+}
+Usage.title = 'State Reducers (with change types)'
+
+export {Toggle, Usage as default}
+
+/* eslint
+"no-unused-vars": [
+ "warn",
+ {
+ "argsIgnorePattern": "^_.+|^ignore.+",
+ "varsIgnorePattern": "^_.+|^ignore.+",
+ "args": "after-used"
+ }
+]
+ */
diff --git a/src/exercises/10.js b/src/exercises/10.js
new file mode 100644
index 0000000..a31dcba
--- /dev/null
+++ b/src/exercises/10.js
@@ -0,0 +1,79 @@
+// control props
+
+import React from 'react'
+import {Switch} from '../switch'
+
+// Here we're going to simplify our component slightly so you
+// can learn the control props pattern in isolation from everything else.
+// Next you'll put the pieces together.
+
+class Toggle extends React.Component {
+ state = {on: false}
+ // 🐨 let's add a function that can determine whether
+ // the on prop is controlled. Call it `isControlled`.
+ // It can accept a string called `prop` and should return
+ // true if that prop is controlled
+ // 💰 this.props[prop] !== undefined
+ //
+ // 🐨 Now let's add a function that can return the state
+ // whether it's coming from this.state or this.props
+ // Call it `getState` and have it return on from
+ // state if it's not controlled or props if it is.
+ toggle = () => {
+ // 🐨 if the toggle is controlled, then we shouldn't
+ // be updating state. Instead we should just call
+ // `this.props.onToggle` with what the state should be
+ this.setState(
+ ({on}) => ({on: !on}),
+ () => {
+ this.props.onToggle(this.state.on)
+ },
+ )
+ }
+ render() {
+ // 🐨 rather than getting state from this.state,
+ // let's use our `getState` method.
+ const {on} = this.state
+ return
+ }
+}
+
+// These extra credit ideas are to expand this solution to elegantly handle
+// more state properties than just a single `on` state.
+// 💯 Make the `getState` function generic enough to support all state in
+// `this.state` even if we add any number of properties to state.
+// 💯 Add support for an `onStateChange` prop which is called whenever any
+// state changes. It should be called with `changes` and `state`
+// 💯 Add support for a `type` property in the `changes` you pass to
+// `onStateChange` so consumers can differentiate different state changes.
+
+// Don't make changes to the Usage component. It's here to show you how your
+// component is intended to be used and is used in the tests.
+// You can make all the tests pass by updating the Toggle component.
+class Usage extends React.Component {
+ state = {bothOn: false}
+ handleToggle = on => {
+ this.setState({bothOn: on})
+ }
+ render() {
+ const {bothOn} = this.state
+ const {toggle1Ref, toggle2Ref} = this.props
+ return (
+
