score:0
you could try adding container that wraps your html and adding a callback prop to grandchildright
for it to call when its state updates:
var grandchildright = react.createclass({
clicksomething: function () {
this.props.onupdate({data:'you clicked me'});
}
});
var leftcomponent = react.createclass({
render : function () {
{this.props.data}
};
});
var container = react.createclass({
onrightgrandchildupdate: function( newstate ) {
this.setstate(newstate);
},
render: function() {
return (<div classname="container">
<div classname="left">
<leftcomponent data={this.state.data} />
</div>
<div classname="right">
<rightcomponent>
<anothercomponent>
<grandchildright onupdate={this.onrightgrandchildupdate.bind(this)} />
</anothercomponent>
</rightcompoent>
</div>
</div>);
}
});
(notice the .bind(this)
when passing this.onrightgrandchildupdate
to onupdate
of the grandchildright
component. doing so ensures this
binds to the container component, and not the current global object.)
then your "html" becomes:
<container />
essentially, this lifts the data
you're interested in to a level above both the right grandchild and left component. the supplied onupdate
property allows the right grandchild to update the container's state, which then affects the data
passed into the left component.
score:3
there should be a parent component above all of this then grandchildright component will let parent component about any change then parent component will tell left component about the change
var parent = react.createclass({
handleeventchange : function(event){
this.setstate({data:event.data})
},
render : function () {
<leftcomponent data={this.state.data}/>
<rightcomponent oneventchange={this.handleeventchange}/>
};
});
var leftcomponent = react.createclass({
render : function () {
<div>{this.props.data}</div>
};
});
var rightcomponent = react.createclass({
render : function () {
<grandchildrightcomponent onchildchange={this.handlechildevent}/>
};
handlechildevent : function (event) {
this.props.oneventchange({data: event.data})
};
});
var grandchildrightcomponent = react.createclass({
clicksomething : function () {
this.props.onchildchange({data:'grand child is clicked'})
}
});
Source: stackoverflow.com
Related Query
- React - Passing data to Grand parent Component
- passing data from child to parent component - react - via callback function
- Passing data to parent component in react
- Passing API data from parent container to child component in React
- React router dom passing data from parent component to child router component does not pass the props.match
- Passing data from child to parent component not working in react
- React passing data from parent to child component using context doesn't work
- Re render child component depending on child action while passing data to parent in React
- Passing data from a single JSON file from parent to child component in React using dynamic routes
- react passing data from parent to child component
- Struggling in passing data from Child to Parent React Component. Cannot update a component (`App`) while rendering a different component (`Table`)
- React - Passing data from child to parent component
- In React, how to fix the infinite/loop data passing from the child component to parent react functional component
- passing data between child and parent component in nested component react js
- React Hook : Send data from child to parent component
- how to make material data grid width to fill the parent component in react js
- React | pass data from parent to child component
- Passing data to parent in React
- React passing fetched data to another component
- Passing data from rails controller to react component
- How can I make sure a React parent component loads data before its child component mounts?
- How Do I Pass a Function Through A React Component For Data Sharing Between Parent and Child?
- Passing value of input field to parent component in React
- React and Redux: Are there any performance issues/possible side effects with passing a parent component as a prop to its children
- Props are not passing from parent to child components in React Functional component
- How do I send data from child component to parent component in React
- React collect child component data on some event from the parent component
- useState not updating data when passing from parent function component using ref
- Passing a prop from a Parent component becomes null in the Child component React
- React - Passing child data to parent - wrong checkbox value
More Query from same tag
- Concat arrays in redux reducer
- Infinite Loop on API GET Requests
- The setState function in react doesn't change the state of my component
- Typescript set complex object property values programmatically
- Nextjs dynamic routes - how to pass props from parent to dynamic route child
- Active Directory Authentication with .NET Core Web API and React
- state passed through history.push not accessible in redirected class
- setState also changes screen props
- react redux how to trigger container function with action coming from non react component
- How to insert data from a Form in REACT
- cannot use theme color by muiThemeProvider tag in material-ui
- AsyncSelect setting data from api
- onScroll in react only works on the window?
- userData.name is not showing the user's name
- import scss in a react component on SSR
- React js - make button link to a different app
- How to style a label when input inside it is checked?
- useEffect changing the desired variable but no effect React
- How to hide special symbols in a <p> tag
- How to fix the 'setOption' does not exist on type 'MutableRefObject in react
- Navigate Between Stack Screens using imported button
- How to store the page number in ReactJS (not in state) to construct the GET URL with page number from 1 to 5
- Getting empty state after calling the handleSubmit event from setInterval function
- Additional arguments for React event handlers (using functional components)
- Fix cannot GET /url react router
- React Hooks - setting object not re-rendering the component's data
- React Profiler - Start profiling and reload page?
- Keeping track of selected div in grid of divs with React state
- How do I access and view the image present in my Laravel's storage folder in a React form?
- How to pass parameters to reactjs app hooked in as webpart of a site?