Prop Getters

👨‍💼 Uh oh! Someone wants to use our togglerProps object, but they need to apply their own onClick handler! Try doing that by updating the App component to this:

function App() {
	const { on, togglerProps } = useToggle()
	return (
		<div>
			<Switch on={on} {...togglerProps} />
			<hr />
			<button
				aria-label="custom-button"
				{...togglerProps}
				onClick={() => console.info('onButtonClick')}
			>
				{on ? 'on' : 'off'}
			</button>
		</div>
	)
}

I want both the toggle to work as well as the log. Does that work? Why not? Can you change it to make it work?

What if we change the API slightly so that instead of having an object of props, we call a function to get the props. Then we can pass that function the props we want applied and that function will be responsible for composing the props together.

Let's try that. Our

app.tsx

file has been updated to use a new API we're responsible for creating. See if you can make that API work.

🦺 The types for the argument to the getTogglerProps component might be a bit tricky, so here's a little tip: you can get the onClick prop from: React.ComponentProps<'button'>['onClick'].

05. Prop Collections and Getters/02. Prop Getters (💪 problem)

Prop Getters