Develop Reference

React send new props and then clear state

I have the following situation:
I have a parent React component and a child.
The parent has a table and the child has some controls of its own.
What I want to accomplish is being able to click on a cell in the parent table and have the cell value get transferred over to the child so that the user can edit it there.
This is what I implemented:
I record the cell value in state in the parent on click.
When this I record this value, a re-render happens and the string gets sent to the child via props.
The issue I'm running into is that if something forces a re-render on the parent, that value will get sent to the child again, even though the child may have changed it.
To solve this, what I thought of originally was to send the prop down to the child and then have the child reach back up via a callback to the parent to clear the value in the parent's state. I fall into a loop doing this so naturally it doesn't work.
What is the correct way to send data down into a child component and then have it get cleared post-render?

Each React component update will dispatch a re render action. And when a child component receive new props that component will to re render too.
Note that a child item should be re render only if the props values are news o the inner component state have changed.
For your situation I say: you can pass a object to your child component using props, and execute an function in the parent inside of the child. You only need pass the function in the parent to the child component as a prop, after, execute it inside the child component when you need it.

State that is passed down to children via props should be modified by the parent. I would look into 'react lifting state'
Class Component:
But essentially, your child's handlers (ex. handleClick) should be declared in your parent component and passed down to your child component as an onHandler (ex. onClick=this.onHandleClick) and in the child can be referenced as this.props.onClick
Functional Component:
Basically the same thing but you shouldn't use the this. reference.

How to reload a component on a change event in angular

I have angular component, which is loading other components , now in a event change say dropdown item selection, i need to reload just one specific component. Is it Possible to do that?
I looked into some answers in stack overflow itself but mostly are about reloading the whole page.
<dropdown (change)="detectChange($value)" />
<Component-one></Component-one>
In one component i have a 'drop down' with few values, and other component say 'component-one' already loaded with it , when the value in the "dropdown" changes i need to reload "component-one".

It is a general question. First of all you need to understand what you want to achieve in the end.
One way for "reloading" component, pass some data to the component based on the dropdown value, so, it will automatically "reload".
The other way is that you can have url param or query param based on the dropdown value, and on dropdown value change, navigate to the route with new param value, so the component will "reload".

Passing data from parent to specific children in Angular

I have a parent component that loads dinamycally childs components via *ngFor. My parent component loads data for rendering child components. There is extra data needed after on user request.
The html of parent component:
<panel *ngFor="let item of collection" (selected)="onTogglePanel($event, item)">
<div panel-body>
<item-detail
*ngIf="item.detail; else templateLoading"
[detail]="item.detail"
(eventItemLoad)="getExtraData($event, item.detail)"
></item-detail>
</div>
</panel>
Each child component, emits an event to the parent component, that will make an http request for getting the data.
The question is, how can I pass the data to the sepecific child component?
I have been reading about invoking child method from parent, but I don´t know really how to invoke only for specified child.
NOTE: Perhaps my approach of parent getting data and passing to children is not correct and each child should get the data. Any advice for the approach is welcome. Thanks for any help.

The child should get the data on its own.
It looks like you just need item.detail to get the additional data. So if you don't need anything from the parent, just let the child make the http request.
This is about separation of concerns : in Angular you achieve this by creating components, each one serving its specific purpose - and not "messing" with another one if it is not needed.

Send an event up multiple parents to trigger a function Angular 5

I have a main-page.componenent.ts like so...
<app-page-component></app-page-component>
and then inside my app-page component I have another nested component like so..
<nested-compoennt></nested-component>
so basically my app looks like this
<app-main-component> // where the function is
<app-page-component>
<nested-component></nested-component> // where the button is
</app-page-component>
</app-main-component>
now I have a button in my nested-component and I want that to trigger a function on the top parent component.. now I know if I was passing an event to the most direct parent I could use an event emitter but Im not sure if that will work in this case.. so my question is how can I 'bubble' up an event so it hits the most parent container and triggers and event?
any help would be appreciated

You have two options.
The first option, you can have each component have an output that broadcasts the event up. This can get unweildly pretty quickly, especially if it is deeply nested.
The second option, you can use a shared service to send and receive messages. Essentially your component that has the button would call a method on your service that broadcasts out the event and your parent component would use the service to subscribe to these events that are broadcast out and act appropriately.

There are lots of cases and little bit hard to understand what your case is.
In my view,
There would be 2 opstions.
grandparent <=> parent <=> children : event emitter
(https://angular.io/guide/component-interaction#!#bidirectional-service)
using service : define service and call children components to set data or make events, and grandparent subscribe the value changes or event subscribe.
I hope this would be helpful :)

React-Native parent Node change children value

I am looking for all web but I no found any solution, maybe because I am newer with React-Native universe.
Well, my question is about Node Parent change value of Children.
My situation is, I have a data controller and this data controller listen data from events and when the events happen it need update a component like Slider.
the render need be.
<DataListener url={this.state.service_url}>
<Slider style={this.styles.slider_component}/>
</DataListener>
I need understand the cycle to get a default Slider with my Class DataListener. Is it with props in constructor? How can I get the slider inside DataListener and change this value like this.default_slider.value = 0.4
Thanks Advance
Victor C Tavernari

You should pass down the value as a prop and then your slider component can deal with it appropriately. Of course DataListener has to get the value in the first place and as you have detailed that let's assume it is in state (when you update state (via this.setState(newState)) it will cause a re-render of the DataListener which will in turn re-render the Slider with the new property):
<DataListener url={this.state.service_url}>
<Slider style={this.styles.slider_component} value={this.state.value}/>
</DataListener>
the data controller event you refer to would then be something like
onEvent(e) {
this.setState({value: e.value});
}