Update/refresh a component using another component - javascript

I'm sorry for this question but I'm new to react and trying to find best practice on how to update another class component from another class component.
For example I have AddItem.js and ViewItem.js but has the same route. I'm updating ViewItem.js ListGroup by re-rending(componentDidMount()). How can I do this with AddItem.js button onClick?

You can take a new state property in the parent and pass that as props to AddItem and ViewItem and use that prop as a state for these two components and in your button click event you can change the state and react renders the component automatically on state change.
See this simple example

If ViewItem and AddItem are siblings, then you can call methods of each other using ref of another component use ref doc
OR
you can also wrap both with parent component and use parent state for both the child.
If Viewitem and Additem are child-parent or vice versa then you can use pass props and change state based on the change in props.

It can be achieved by creating a parent class (for example Home.js) on top of AddItem.js and ViewItem.js and pass data as props on click to the child component.
In case you if you are using React and Redux it becomes relatively simple on click of a button you can call method in your action.js which will dispatch an action with payload data to the reducer, which can we used by adding mapStatetoProps() in ViewItem.js and AddItem.js, so once you receive the data in your props variables it will reload/refresh that particular component.

Related

Passing state from child to parent

Hi I'm just starting with React and I came across a problem with passing states. Can I pass child state to a parent component to conditionally render other child components?
In React, you cannot pass state to a parent component. Instead, notify the parent component of changes using a callback function.
To do so, pass a function (defined in the parent) in the props of the child component, and call it when changes happen. The parent can then notify (other) child components through their props.
Passing state from child to parent is remarkably easy - all you need to do is pass a function from the parent to the child which receives the state.
getState=(childState)=>{
//use state here
}
<>
<customChild returnState={this.getState} />
<>
class customChild extends.... {
...
render{
<button onClick={this.props.returnState(this.state)}>Click Me!</button>
}
}
That being said, ideally you want the parent to control all the state values and pass just the needed values down to the child. As the parent state changes the child will re-render that changed items. This way your entire page has its state(s) all in a single location for debugging.

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 Lifecycle Events - Child Component Inherits Old State Props

Im probably getting something not right with my understanding of states & props in React. This is using React, Redux based app.
Scenario:
I have a global SVG component, which gets the dimensions of the viewport from the app within the componentDidMount method.
The default (upon initialisation of the app) props of the SVG in the state are:
dimension : {
width : 0,
height : 0
}
The componentDidMount retrieves the width & height values from the DOM
and dispatches the values to the state.
Now I have a child component of SVG component, which needs the updated svg width & height values to calculate the default viewbox & update the state again. This needs to be executed only once upon mounting (important point), hence the calcuation of the viewbox is in the componentDidMount of the child component.
Whats Happening:
However, I guess because of React batch updating the DOM, the props passed to the child component are the default initial width & height values, not the updated state after SVG component's componentDidMount.
Question:
How can I pass the updated state to componentDidMount of the child component. Note:
I cannot use componentDidUpdate, which would mean, that everytime the component is updated, it will calculate the default values & update the view again, thereby, over-riding the user position.
If you set the state in componentDidMount() than it will re-render the component.
If you want to use the props, you should work in componentWillReceiveProps(nextProps), that in the React life-cycle is called each time the component receave props from parent component.
That seems what you're trying to achieve so far.
What happens in your case is that before the componentDidMount of the parent component executes, your child component is rendered and hence it receives the default props. So the props that get updated in the componentDidMount of the parent will reflect in your child as the updated props
You can make use of componentWillReceiveProps function in the child component to set the state based on the updated props.
However this will be executed everytime the props get updated from the parent, so what you can do is that pass some prop from the parent which is being set with a particular value in the componentDidMount of parent and later has a diffrent value. Based on this props in componentWillReceiveProp you can set the initial state of the child component.

Categories

Resources