score:0
you can provide a callback function to your navbar component and the function will get the app.tsx context
<navbar toggletheme={toggletheme} />
then in your component
<button variant="light" onclick={this.props.toggletheme}>
<img src={lightmode} alt="darkmode/lightmode change" />
</button>
score:0
a good use case for provider pattern. basically, you would create a so-called "provider" component with an internal state to encapsulate your current theme and a function for toggling the theme:
import react, { usecontext, createcontext, usestate, usememo } from 'react'
const selectthemecontext = createcontext()
const selectthemeprovider = ({ children }) => {
const [theme, settheme] = usestate('light');
const toggletheme = () => if (theme === "light") {
settheme("dark");
} else {
settheme("light");
}
const value = usememo(() => [theme, toggletheme], [theme, toggletheme]);
return <selectthemecontext.provider value={value}>{children}</selectthemecontext.provider>
}
const useselectthemecontext = () => usecontext(wordscontext);
export { useselectthemecontext, selectthemeprovider }
fix your app.tsx to something like this (wrap the content with selectthemeprovider
):
import { useselectthemecontext } from './selectthemeprovider';
const app = () => {
const [theme] = useselectthemecontext();
return (
<selectthemeprovider>
<themeprovider theme={theme}>
<globalstyles />
<div classname="app">
<navbar/>
<button onclick={toggletheme}></button>
<div classname="app-header">
<img src={logo} classname="app-logo" alt="logo" />
<h1>linusromland.com</h1>
</div>
</div>
</themeprovider>
</selectthemeprovider>
);
}
to switch theme in navbar:
import { useselectthemecontext } from './selectthemeprovider';
class navbar extends react.component {
const [,toggletheme] = useselectthemecontext();
render() {
return (
<div classname="navbar" data-testid="navbar">
<bsnavbar bg="light" expand="lg">
<container classname="col-5">
<bsnavbar.brand href="/">linus romland</bsnavbar.brand>
<bsnavbar.toggle />
<bsnavbar.collapse classname="justify-content-end">
<nav>
<nav.link href="/" classname="text-dark">
home
</nav.link>
<nav.link
href="https://github.com/linusromland/"
classname="text-dark"
>
github
</nav.link>
<nav.link href="/about" classname="text-dark">
about
</nav.link>
// here! just pass toggletheme function to onclick
<button variant="light" onclick={toggletheme}>
<img src={lightmode} alt="darkmode/lightmode change" />
</button>
</nav>
</bsnavbar.collapse>
</container>
</bsnavbar>
</div>
);
}
}
point of the story: you don't have to pass your function for theme toggling down the component tree. simply import useselectthemecontext
in any component which is wrapped by selectthemeprovider
and use toggletheme
function to toggle the theme.
Source: stackoverflow.com
Related Query
- Passing a function down to a component through props - REACT
- Passing down function from parent to child through React functional component
- Passing a function with React Context API to child component nested deep in the tree
- React passing parameter with arrow function in child component
- Passing props to a react component wrapped in withRouter() function
- passing data from child to parent component - react - via callback function
- Passing an empty function into a React component
- WebStorm highlights React component when props passed through react-redux connect function
- Passing React context through an HOC to a wrapped component
- Passing a function as a prop to a Typescript React Functional Component
- Passing Generics to function component React Typescript
- React TypeScript Passing a function to child component
- Passing a function to Child Component through a Prop using ReactJS
- How Do I Pass a Function Through A React Component For Data Sharing Between Parent and Child?
- What is the difference between passing a function name in onclick react and calling it through callback
- React function not passing down from functional to functional component
- Can I extract a function to a utils file and then use it in a React component while passing a function from the component to it?
- Is there a way to access a function returned by a React component through a parent HTMLDivElement?
- React Passing Component Function - cannot use in function
- When passing a React functional Component as a parameter of a function, how should I declare the function parameter type with TS
- React passing a component as a param to a function
- React - passing a function to a child component does nothing
- Map function not working while passing props into React component (TypeScript, React and Next.js)
- React and checking condition after passing function through props
- Passing function to create new component to child using react hooks
- Passing a function as a prop to update state in parent component in react
- Trouble passing a function to a stateless functional component in React
- React this.props.function is not a function when passing in functions from parent component to child component
- Managing State when Passing React Component Constuctor Function to Another Component as Attribute
- React: Passing function to React props but giving error on accessing it in component
More Query from same tag
- Issue with the const keyword and methods declaration
- Order Array of objects by parentId
- why after refresh page state is undefined?
- React.js deal with missing data in json (TypeError: Cannot read property 'prefix' of null)
- OnChange not saving the written input value on setState
- How to trigger a modal when clicking on a dropdown item in Semantic UI React?
- How can I access router params in JSX?
- How to access state from another function inside React useEffect
- Why Curly braces while handling a Promise object provides undefined data?
- how to get title of clicked component and use that title in another component?
- How to reverse/descend/sort x-axis data in react-vis
- Show icon to the right of a Headless UI Popover.Button
- React testing - How can I mock or inject data in the store to be provided as props to component
- typescript correct type for svg component passed as prop
- Select in bold a specific <li> into a React map
- Detect left or right part was clicked of the path element of SVG (React component)
- Is there a way to store part of application state in URL query with React+Redux?
- "this.props" not working in my on mouseup event function in Map Component using react and mapbox-gl
- sorting array of objects alphabetically on selecting options from dropdown in react app
- How to pass props to route without causing component to mount twice?
- name undefined but inspector shows
- Styling Class Components with an alternative to makeStyles
- Where is Children from mapStateToProps in redux official todo example?
- Infinitely scrollable <tbody> element?
- Uncaught TypeError: Cannot read property 'forEach' of undefined
- Update nested object in Redux reducer
- Getting current table data from Ant Design Table
- How trigger UseEffect Once with dependencies?
- How to write exclusion for props' children when mapping over them in a component?
- React increment and decrement count