Commit a53f373

committed

update context solution

1 parent dc2909c commit a53f373Copy full SHA for a53f373

File tree

+15

-22

lines changed

+15

-22

lines changed

Lines changed: 9 additions & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,18 +1,16 @@`
`1`	`1`	`import React from "react";`
`2`		`-// import { ThemeContext } from "./ThemeContext";`
	`2`	`+import { useTheme } from "./ThemeProvider";`
`3`	`3`	`import Button from "./Button";`
`4`	`4`	`import Hero from "./Hero";`
`5`	`5`
`6`		`-/*`
`7`		`- TODO: implement a Consumer from your ThemeContext.`
`8`		`- with this consumer you can pass the function to toggle`
`9`		- the theme to this button in the `onClick` prop.
`10`		`-*/`
	`6`	`+// TODO 4, use the useTheme and pass the toggleTheme to the onClick prop of the Button component`
`11`	`7`
`12`		`-const App = () => (`
`13`		`- <Hero>`
`14`		`- <Button>Theme Switcher</Button>`
`15`		`- </Hero>`
`16`		`-);`
	`8`	`+const App = () => {`
	`9`	`+ return (`
	`10`	`+ <Hero>`
	`11`	`+ <Button onClick={() => {}}>Theme Switcher</Button>`
	`12`	`+ </Hero>`
	`13`	`+ );`
	`14`	`+};`
`17`	`15`
`18`	`16`	`export default App;`

Lines changed: 5 additions & 10 deletions

Original file line number	Diff line number	Diff line change
@@ -10,15 +10,10 @@ const StyledButton = styled.button`
`10`	`10`	`background-color: black;`
`11`	`11`	`;
`12`	`12`
`13`		`-const Button = ({ children, ...rest }) => {`
`14`		`- // TODO 4, use the useTheme in the Button.jsx component in this folder`
`15`		`- const { toggleTheme } = () => console.log("BUTTON CLICKED!");`
`16`		`-`
`17`		`- return (`
`18`		`- <StyledButton onClick={toggleTheme} {...rest}>`
`19`		`- {children}`
`20`		`- </StyledButton>`
`21`		`- );`
`22`		`-};`
	`13`	`+const Button = ({ onClick, children, ...rest }) => (`
	`14`	`+ <StyledButton onClick={onClick} {...rest}>`
	`15`	`+ {children}`
	`16`	`+ </StyledButton>`
	`17`	`+);`
`23`	`18`
`24`	`19`	`export default Button;`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@ export const ThemeProvider = ({ children }) => {`
`15`	`15`	`// TODO 3, implement the useTheme and share the context like the example useModal`
`16`	`16`	`export const useTheme = () => {};`
`17`	`17`
`18`		`-// TODO 4, use the useTheme in the Button.jsx component in this folder`
	`18`	`+// TODO 4, use the useTheme in the App.jsx component in this folder`
`19`	`19`
`20`	`20`	`export default ThemeProvider;`

Comments

(0)