Develop Reference

ReactJS - dynamically created components don't update singularly when adding sub-elements

I'm new to React - I'm creating dynamically a few components that takes a title from an input box by clicking on a button. Each subcomponent created can add a row with text inside the component itself. When I try to add a row to a subcomponent it adds to all others too. I cannot understand how to "isolate" the click for each component. Also when I create a new component it copies overs the previous text.
I'm attaching a sandbox here https://nv82kc.csb.app/
Any idea/suggestion?
Thanks!

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.

React useEffect on dom element

Let's say I have two "buttons" (they're div elements with an onClick attached). Each one changes a product's price inside a div element.
How can I do something when that div was clicked, inside another component ?
Can I somehow put dom element to the dependencies array of an useEffect ?
for example:
useEffect(() => {
// Do stuff
}, [document.getElementById('div-that-shows-price')])
I tried the above, didn't work. I even tried it with .textContent, innerHTML, ....
I'm guessing I can't use ref because again, they're in different components. Or can I use a ref defined in a component from another one ?

I think you have to use useRef hook:
https://fr.reactjs.org/docs/hooks-reference.html#useref

The question is not clear. But from what I understand, why don't you pass price as props to another component? You can put product price in a parent component state and pass it as props (with updatePrice method) in both button components. Or use global state (redux).

I am guessing, what you building is basically counter, in one div you want count aka price to be able to incremented and decremented, and in the other div you would like to see the button click result. Since you're using React, this is achieved by useState() and just passing result prop from parent component div which would have the button to the child component div.

Call a sub-component method from parent compoent in Angular 2 +

I'm new to Angular, and as the title states, I'm trying to see if this is doable.
Instead of using the standard way of a sub-component sending data via it's #Output EventEmitter, I would like to have the same concept (without injecting the parent into the child) but with the parent component emitting data to a child. Can a parent component emit data to a child? If not, why is that so?
Just to clarify, the sub-component is a form that gets filled in. As soon as the form is complete I want a button on the parent component to see if the form was complete before submitting it.

This was achieved simply by interacting with the child component using a template reference variable.
Add the variable to the child component selector element and access its properties and methods with it from the parent template:
<child-selector #variable ></child-selector>
<button (click)="variable.ChildMethod()"/>
Alternatively, access the child component method/properties directly from component class:
<button (click)="AccessChildMemebers(variable)"/>
AccessChildMemebers(elem){
elem.ChildMethod();
}

React how to change focus of inner component's input box from the parent

I have a child component that renders several list elements from an array. This child component's list items when clicked turns to input boxes, and can be changed. But I need to also put focus on the input box when it's rendered.
Here is a quick view of what my app is so far.
I'm making list items from an array in the state and it's then mapping around while populating the array items in the parent components render function (like any other tutorial shows).
render: function() {
var listItems = this.state.ingredients.map(function(item) {
return <ListItem key={item.id} id={item.id} refer={item.ref} handleChange={this.toggleEnv} env={item.env} ingredient={item.text} />;
}.bind(this));
id for callback from the child component to search the array using id.
env for toggling states from list item to input box and back to list item.
toggleEvn is the function i use for every manipulation of the child component with callback a child component make.
Now that refer property where I pass the item.ref to the child component so it can attach it to the input and then use
componentDidMount: function() {
ReactDom.findDOMNode(ref-name-passed-from-child-component-callback).focus();
}
Where in the child element i pass clicked list items ref (which is equal to input box's ref) to the callback so it can be captured by the parent but it passes null so i can't add the focus from ReactDom.findDOMNode().
I checked in react documentation and they say something like
Never access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack
I'm a very newbie in react and i think this is referring to my current situation.
But they also have another way of using refs by passing a callback in ref which will be used when some button is clicked as seen here https://facebook.github.io/react/docs/more-about-refs.html
I followed the example by
Adding a ref callback like this ref={(ref) => this.myTextInput = ref}
in my input tag.
Instead of the button, i triggered the function when the list item is clicked. This doesn't work since the this.myTextInput isn't created yet. (Since this function is triggered when list item is clicked and it's before the input is rendered.
At this point i was stuck completely because i can't pass this ref to check it in componentDidMount.
I'm convinced that I'm missing on some understanding here please with refs, child components and callback. Please help.