score:0
as in react, the data flows down, for the child component to change state of its parent, it can only be done via callback passed the parent.
you can pass the callback via props
, context api, or use any state management library.
for example:
class app extends component {
state = { show: "login", user: "guest" };
render() {
return (
<>
<menu />
<activities onclick={this.setstate} />
</>
);
}
}
class app extends component {
state = { show: "login", user: "guest" };
render() {
return (
<ul>
<li onclick={() => this.props.onclick({ show: "home" })}>
<a>home</a>
</li>
<li onclick={() => this.props.onclick({ show: "activities" })}>
<a>activities</a>
</li>
</ul>
);
}
}
Source: stackoverflow.com
Related Query
- Setting Parent State from Children Component
- Couldn't correctly initialize state in parent component from children states
- How to prevent shared state in a parent component from breaking CSS transitions in children component
- Prevent parent from rerendering while setting state from children in React
- React js setting the state of a parent component from child Render method
- Change children state from parent component in React JS
- React: updating parent state from nested children component
- React hooks: Dynamically mapped component children and state independent from parent
- React js change child component's state from parent component
- Accessing React component children props from the parent
- Change react hook state from parent component
- Updating Parent Component State from Child Component with UseState React Hook
- ReactJS modify parent state from child component
- Can we pass setState as props from one component to other and change parent state from child component in React?
- Updating child's state from parent component
- Refreshing children state from parent React
- Reactjs - Setting State from props using setState in child component
- How to re-render a parent from a children component with hook?
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- Sharing state from parent to child component in React
- React Hooks (Rendering Arrays) - Parent component holding a reference of children that are mapped vs Parent component holding the state of children
- Access child state of child from parent component in react
- Passing state from a child to parent component
- How to test state that has been lifted up from child to parent component in React?
- How to update parent state from child component in React + send a paramater
- Pass values from children to parent component
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
- Extract parent component configuration from number/types/props of children
- Pass state from child component to parent component
More Query from same tag
- React - passing props are viewed as object, error prompt 'objects are not valid as a react child'
- Why does React tell me unexpected token "."
- React | How to remove prevent.default from state update
- React Facebook Login popping up on page load
- The select style of the list sticks out of the border
- React CSS Modules - Some CSS is not applied (for 'active' class set by NavLink component)
- TypeError: instance.render is not a function while using react-router-dom
- React JS multiple API calls, data undefined or unexpected reserved word 'await' mapping through the data:
- Best Practice for retrieving the data-attribute value in React
- React Hook "useEffect" is called conditionally, in supposedly simple get-display-retrieve inputs component
- Why does my routing not work when I upload my webpack production build online?
- ReactJS: access child method
- not being able to pass url parameters in react.js
- handleSubmit and onChange handleSubmit resulting in setState error or cannot enter character
- When using container in React-Boostrap my body's background-color is overwritten
- CSS - How to change scrollbar height
- I want to log my data using getInitialProps() from next.js
- How to define function in React Component?
- Expected Identifier in Symbol.for
- "Error: ER_NO_SUCH_TABLE: Table 'managementapp.medicament' doesn't exist"
- How can I make a React "If" component that acts like a real "if" in Typescript?
- How do I insert a component within a MAP of other component in React?
- Adding/removing input fields
- Why Bootstrap icons does not work in ReactJS?
- How to access window variable in Javascript object?
- Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children?: ReactNode; }>
- How to render react components based on an ACL object?
- react bootstrap Card component - how to not display image on mobile?
- React hooks useState hook
- React JS Crud Issues with mutable data