score:1
Accepted answer
we use props to pass the data from the parent's state to the children (there's no need to bind states of parent and child, or use refs, or attempt to involve life-cycle methods):
const { render } = reactdom
class component2 extends react.component {
render(){
return (
<div>
enabled: {this.props.isenabled ? 'true' : 'false'}
</div>
)
}
}
class othercomponent extends react.component {
render(){
return <div style={{backgroundcolor:'black', color:'white', width:100}}>{this.props.children}</div>
}
}
class component1 extends react.component {
constructor(props) {
super(props)
this.selector = this.selector.bind(this)
this.state = {
enable: false
}
}
selector() {
this.setstate({
enable: true
})
}
render() {
return (
<div>
<select onchange={this.selector}><option /><option>enable</option></select>
<othercomponent>
<component2 isenabled={this.state.enable} />
</othercomponent>
</div>
)
}
}
render (
<component1 />,
document.getelementbyid('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
Source: stackoverflow.com
Related Query
- React Set Child State From Parent Dropdown Menu
- react js set state from parent to child component
- Can i set state in parent from child using useEffect hook in react
- React hooks - set state of Parent from child via function
- Semantic UI Dropdown , trying to set state from child to parent
- React - set state of parent component to close modal from a child component
- How to Set a state of parent component from child component in react js
- How to set the state of parent component in react from inside child component
- useContext with React Hooks to set state of parent from child
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- React - Pass child dropdown menu state to parent
- React js change child component's state from parent component
- Updating Parent Component State from Child Component with UseState React Hook
- React update state in parent from child components
- Sharing state from parent to child component in React
- Access child state of child from parent component in react
- How to update parent state from child component in React + send a paramater
- how to set react parent component state by a async function and then pass this state to child as props?
- React 15.1.0, Pass entire state from parent to child
- React Set State From CountDown Child
- React How to change state value from child to Parent using useState and useContext
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Update parent component State from child component in react js
- React - Passing state from child to parent in drop down select
- Problem updating parent state from child component in React
- Can I consolidate multiple functions that set state based on callbacks from React child components?
- React Context API, set context state from Child Components instead of passing functions as props
- React parent access state from child
- React - How can I set my parent state using child component, using function structures (not classes)
- In React, how can a parent component set state from the response an async fetch function performed in a child component?
More Query from same tag
- Render objects in a List in React
- How can I manually dispatch React Synthetic Events?
- Styling ReactSelect with CSS-in-JS
- Laravel preset React: problems encountered when `npm run dev` is executed
- Access variable returned from react function within render (in loop)
- How do you use react-router-dom to redirect user when token has expired?
- How to add transition on closing Modal in React and how to close when clicked outside of the Modal?
- Redux react root reducer slowing down
- Should I send sensitive info from the server in a jwt or plain json?
- How to prevent button from losing focus when clicking elsewhere on screen?
- Align IconButton with Text in a line
- Where in redux to call a function that writes data from payload?
- How to pass onClick function in sibling components using functional components?
- Reactjs: How do I remove the page-not-found component from every existing URL?
- Do I have to return state in a Redux Reducer?
- How to combine hooks(useEffect) with axios
- Mixing strings and html links in react/typescript constants
- Not understanding what this error in React / WebPack mean
- How to update and assign an array of object to a new variable
- ReactJS without virtual DOM
- How can I get "useState" to work properly when using event handlers for mouse events witin a React component?
- hierarchy in react Router
- React - unable to call props value inside a usecallback function
- Recursive function with setTimeout is making jest tests exceed maximum call stack size
- How to customize D3 Chart labels
- Check the render method
- Check if object of any array exist in an another array, if not exists then push onto another array , or else remove it from another array
- rxjs momentjs filter last 30 days
- dispatch wont trigger inside a component with switch
- Instantly updating UI with state