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.
Related
I have a child component selectServiceChargeComponent inside a parent component (Saving Invoice Component). Child component is simply a form inside a table. If clicked on add row button new row would be formed. Problem is when I click on add row button, the following error arises:
After looking some SO answers, I found ref would help to trigger a function in child component. So, in parent's component I used a ref inside child component and create a add row button underneath it and tried to trigger a click function addRow().
So that I could use this.$refs.serviceChargeComponent.addRow();.
But another problem came in return.
It looks like addRow() function is outside of methods:{}. Methods in vue should be defined inside methods: {}.
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.
I have a parent component which is a set of child filter menu components. Each child component has a group of radio buttons, and the buttons all determine whether they are checked via their state.
In the parent component, when there is at least one filter for which the user has made a selection, a list of buttons appears of the selected filter options.
When one of these buttons is clicked, it should call a function within that child component to reset its radio groups.
I have seen here and here how to call a function within a single child ref when that ref is known, but how would I accomplish this when the refs are generated in a loop, and I want to only to call the ref of the specific child component that matches the button that was clicked?
Here is the relevant [pseudo-code]:
//FILTERS.JS
{filters.map((filter, index) => {
return (
<FilterContainer
key={`filter--${filter.id}`}
//NEED UNIQUE REF HERE THAT I CAN CALL
/>
)
})}
handleClearSelectedFilter = ()=>{
this.[matchingFilterContainerRef].current.resetRadioGroup();
}
where matchingFilterContainerRef would be the dynamic ref I match to the button that was clicked for the corresponding filterContainer child component.
With hopes I understand your issue correctly, I would like to suggest a different approach.
In the parent component you have a state which hold the filters. each of these filters has its own set of values. The parent then maps over the filters and passes each FilterContainer the props it needs, like the values for it, and also a callback function to when there was a change.
According to the values, the FilterContainer knows how to render its radio buttons. Data is flowing from the parent to the child in a single direction.
Once a radio button is clicked, you will call the callback given by the parent with the filter field and current value, e.g. a gender radio button was clicked, you will call this.props.onValueChange('gender', 'female').
The parent will then receive the callback and set its filters state accordingly. The state changes, the filters get rendered again with the new data.
Hope this helps :)
You can do like this
{filters.map((filter, index) => {
return (
<FilterContainer
key={`filter--${filter.id}`}
ref={`ref_${filter.id}`}
//NEED UNIQUE REF HERE THAT I CAN CALL
/>
)})}
And when you want to access it:
this.refs[`ref_${filterId}`]
See more here reactjs-dom-dynamic-refs
I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.
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.