The grandchild component is wrapped in a container which receives data via a graphql query.
I need to access that data from the Grandparent component in order to check the values in the data set to perform some functionality .
How can I read what data the grandchild has received?
Pass a function from grand parent to the grand child component (you may have to pass it two levels deep, e.g. via Child), then
the grand child will invoke that function (because it received it from props) and pass the data it wants as parameter - hence grand parent will have chance to respond.
Rough sketch:
class GrandParent{
// This function will get called when grand child receives data
dataReceivedInGrandChild(data){
//Do whatever you want with data
}
render(){
....
<Child dataReceivedInGrandChild={this.dataReceivedInGrandChild}/>
....
}
}
you can make a function within the grandchild to return the desired data, then add refs to the parent and to the grandchild and in the grandparent you have to refer to these refs e.g.:
grandP.parent.grandC.getData
or you can fetch the data within the grandparent and path it via props to child and to grandchild
Related
I have this (simplified) structure in my React app:
App
|
---------
| |
Child1 Child2
I want to pass the data from Child1 to Child2 (for example clicking button in Child1 will change colour of one element in Child2)
Two important points here:
I want to avoid Redux if possible
I don't want to re-render the whole app. Only Child2 should re-render
Is there any option how to achieve that (without Redux)?
Try to make each child "dumb" and just have them just present the UI. Anything that changes causes side effects (state changes / handling clicks, etc) is moved up to the parent element, and into a hook.
Child1 gets an onClick function (from the parent via the hook) and child2 gets whatever state variables affect its appearance.
If the children are within other children and you want to avoid "prop drilling", then using React.Context is lightweight.
I have an application which on page load, fetches data(an array of objects) from database and displayed it as rows in UI. Each row is a child component which can be created, edited, deleted or reordered. The parent component has a Save button which gets the data from all child components and updates it in database.
There seems to be 2 ways to store this data:
Store all data in the parent component:
The parent component fetches the data, stores it in a state variable and passes it on to the child components. When data in child component changes, it is directly updated in the parent component. When we need to save, the whole state variable in parent can be written to database as it is.
Pros:
All data is maintained in parent as it should be in the database. So fetch and save are straightforward.
Child components are dumb and only display data in UI. Good separation of smart data-components and dumb presentational-components.
Cons:
Whenever a child updates data, parent's state var updates and so all child components re-render since they share the same state data var(am I wrong here? Does react handle arrays state var's element passed as props smartly?). This could be a problem if the list grows long and there are a lot of child components.
The parent component ends up doing almost everything, making it quite complex.
Store each row data in child component:
The parent component fetches the data, and passes it on to the child component. The child component maintains its own data and when data in child component changes, only updates it in its local state var. When we need to save, the parent component will have to ask each child component to provide its data, collate it into an array and update it in the database.
Pros:
On changing a row data, only that child component is re-rendered.
Child components handle their own data, making parent component simpler.
Cons:
Distributed data across child components means collating them for database writes are a pain.
On clicking save button, calling a function in child from parent using refs, which returns child data is not a recommended react pattern.
In React is recommended that the parent component handles the data and distributes that data to children. To avoid re-rendering every child component I would take a look at memo(): https://reactjs.org/docs/react-api.html#reactmemo. This will cache your child component, and decides if it needs to be re-render or not.
To implement this with an Array I would check out this: How do I apply React.memo to all components in an array?
im newbie on Ractsjs, and now i made on course on Plural sight, the situation its the fallowing, i have one component(child) who is the son and in one hand i have a one component2(father) thats send the 'props' for the component3(son) use them; and for other hand, this component3(son) wants send a callback function to the other component1(father),
in resthat´s my schema:
Component1 Component3
|with callbaclk | with props
| |
└ Component3 ┘
::The seem child receive 'props' from on component(father1) and this seem child component need send a callback function to the other component(father2).........how i can do it??
thks in advance
pd) i attached my code
https://github.com/jmonteros81/Building_-Applications_React
enter image description here
Callbacks are used to send data from child to parent. Callbacks are just simple functions. So you have to write a callback in your parent component and Call that callback from your Child component from where you want to send data to parent.
In Parent component define a function.
getAndPassValue(value) {
this.setState({ count: value });
}
in render pass this function to your child
<ThirdComponent getAndPassValue={this.getAndPassValue} />
In Child component from where you want to pass data to parent call this function.
<button onClick={() => this.props.passvalue(5)} />
Now pass this count to your first Child component from parent
Now you can access this count in your FirstChild component using this.props.count and you can get 5 value passed from your third component.
Is there any easier way to get ref from a child component and use it in the parent component without going down to deep in the nested components?
Imagine you have a parent component and the targeted child is like 5 level down. Then I have to access it like this from the parent component.
this.myRef.current.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild
I have two components in my react application, one is parent and the second is the child.
I pass fakedata state as a props to child and then in child component save this as state of child component. But when I change something in child it's affect on parent state and I don't want this I want it's only effect on child state.
This is how I call child component from parent :
<FakeDataAddEditComponent {...this.props} fakedata={{...this.state.fakedata}} />
and in child component this is how I set fakedata props to state :
componentDidMount() {
this.setState({fakedata:{...this.props.fakedata}},()=>{
})
}
but when I change fakedata state in child it's also changend in fakedata of parent and I don't want this.
To answer your question directly, the reason you are seeing this behaviour is because Javascript passes a reference to the original object down the props and to the state of child component. When you update the child component it is the same instance as the parent is holding.
To fix the problem you should use Object.assign to make a copy of the object, however keep in ming that you will run into problems with nested objects.
Also, if parent object mutates the state in any way after the child state changed it will pass old object as props to the child.
In general you're trying to do something you shouldn't do because you will run into trouble.
On a high level you should go for a proper state management solution like Redux of Flux.