In this challenge you will automate the lights in your house… well, at least in your browser.
- Start the development server and make yourself familiar with the application.
- Notice that the lights are working as expected but the count of turned on lights on the home page (
/
) is not and the buttons on the/actions
page are not working.
-
The count of turned on lights on the home page (
/
) is not working because the state is not shared between the components. -
To make the state of the
Light
components available to theHomePage
component (pages/index.js
), you need to lift the state up to theApp
component (pages/_app.js
). -
In doing so, you will need to find a new way to represent the state of the lights. You can use an array of objects with a
name
,isOn
andid
property. -
Change
Light
component to receive at leastisOn
,name
,onToggle
as props and remove the internal state from the component. -
Change the
Lights
component to render the lights dynamically based on the array in state (.map
). You'll need to pass the array down through props. -
Create a function to toggle the
isOn
property of a light based on itsid
and pass the handler function down to theLight
components. -
In the
Lights
component pass down theonToggle
prop to theLight
component using an inline function to pass in theid
of the light:onToggle={() => handleToggle(light.id)}
This of course depends on the name of the handle function you choose.
💡 Just pick any
id
s you want for the lights."1"
,"2"
,"3"
,… is probably the easiest.
✨ Your app should now work as it did before, but the state is now shared between the components.
- The count of turned on lights on the home page (
/
) is still not working. - Create a value derived from the state and use it to display the count of turned on lights on the home page (
/
).
💡 To derive a value from state you do not need state or effects.
- The buttons on the
/actions
page are also not yet functional. - Create two handler functions to toggle all lights on and off.
- Pass them down to the
QuickActions
component and use them to toggle all lights on and off. - Bonus: Make the
Button
sdisabled
if their action would not do anything:- "Turn all lights off" should be disabled if all lights are off
- "Turn all lights on" should be disabled if all lights are on
- The
Layout
component accepts aisDimmed
prop that can be used to dim the background. - Set the
isDimmed
prop totrue
if all lights are turned off. 🌚
- You'll have to touch the files inside
components
andpages
. All the styles are already done, so you can focus on the functional parts.
Select the "Browser" tab to view this project. If this project contains tests, select the "Tests" tab to check your progress.
💡 Please note that Next.js support on CodeSandbox is not great.
To run project commands locally, you need to install the dependencies using npm i
first.
You can then use the following commands:
npm run dev
to start the development servernpm run build
to create a production buildnpm run start
to start the production buildnpm run test
to run the tests in watch mode (if available)
💡 This project requires a bundler. You can use
npm run dev
to start the development server. You can then view the project in the browser athttp://localhost:3000
. The Live Preview Extension for Visual Studio Code will not work for this project.