I have a parent component and a child component.
When I click on Button in the parent component (Box) - the child component (ContainedModal) is opening.
Issue: When Child component is opened - it should change the css (height and overflow) of parent component.
What I need:
I need to move this logic into child component with using Ref. So I need to assign Ref to Parent () and get this Ref in child component.
My parent component
You can achieve this by putting the ref on the div you want in the ContainerModal component like this:
const ContaineModal = ({modalRef}) => {
return <div ref={modalRef}>
</div>
}
<ContaineModal modalRef={reference}/>
Hi I think you should take a look at Forwarding Ref
https://reactjs.org/docs/forwarding-refs.html
this is a way you can initiate a tag it the parents and pass to the child.
a code example can be seen in the doc
Related
What I need to achieve is to handle a specific attribute from one JSX component that I import to its parent component in a way that I will display here.
Child component returns JSX with 'someId' attribute:
return <h1 someId={123}>{title}</h1>
And the parent assigns this JSX to a variable and then needs to read this 'someId' attribute from it - before mounting the variable to the DOM:
let mySpecialChild = <Child title="Hello boys and girls!" />
let mySpecialChildId = mySpecialChild.someId
mySpecialChild.someId is now empty. I know it looks strange and against ReactJS rules but I need this for a very specific use case (in a loop, with additional conditions related to this child attribute). Here I created a sandbox for tests:
https://codesandbox.io/s/small-wood-jx33sz?file=/src/App.js
You can work around this issue by not using JSX to render that component, but directly calling it.
Disclaimer: You should not be using this approach.
If you want the returned DOM representation directly, you will have to call the Child component as a function instead of a JSX.
So if instead of
let mySpecialChild = <Child title="Hello boys and girls!" />
you do
let mySpecialChild = Child({title:"Hello boys and girls!"}),
then you can do let mySpecialChildId = mySpecialChild.props.someId;
Updated demo at: https://codesandbox.io/s/nameless-feather-fwdhs4
You should set a state on the parent component. codesandbox
Define a state which holds the id in the parent component.
Pass the function that sets the state (setSomeId) to the child component from the parent component.
Call setState function(setSomeId) when you want.
The state of parent component will update, so it will rerender with the new value of someId.
Edit:
Notice that the state setter function you pass will not change during renders. React docs state that:
React guarantees that setState function identity is stable and won’t change on re-renders.
There other ways for doing what you want:
useImperativeHandle: If you want to read the child id imperatively, you can pass a ref to the child component from the parent component and use useImperativeHandle hook inside the child component. You can call ref.current?.getId function from the parent component. Notice that if you want to display the id in the parent component, the parent component should be rerendered. So you will see the child id when you press the button that updates the state, and rerenders the parent component. codesandbox
Ref callback: If you don't need to render the value of someId from the child component and you want to call a function whenever the child id changes, you can pass a ref callback from the parent component to the child component. The callback gets called whenever the node is changed. You can access the property you want from the callback. If you want to render someId on the screen, you have to render the parent component. So you should set its value to state. (I changed someId to data-some-id because someId is not a valid prop on a DOM element. codesandbox.
You can access props as:
CODESANDBOX LINK
let mySpecialChild = <Child title="Hello boys and girls!" />;
console.log(mySpecialChild.props.title);
when you console.log mySpecialChild then It will log as:
My root Component is App.js. It has many child components. But i have declare functions in child component and i need to access those function in equal level component in react js. [enter image description here][1]
this are the components hierarchy. i need to pass function from custom player to playbutton component
[1]: https://i.stack.imgur.com/XpEt1.png
Handle the state of the game in App.js. In their (custom player and playbutton component) parent. Pass the state function to them as props and handle the state there.
Ex:
Function App () {
const [SomeState, setSomeState] = setState()
Return
<>
<Button setSomeState={setSomeState}><\Button>
<Button2 setSomeState={setSomeState}><\Button2>
<\>
}
Those buttons handle the same state.
visit this site: https://www.pluralsight.com/guides/how-to-reference-a-function-in-another-component
You can pass state values to a child component as a prop, but you can also pass functions directly to the child component like this:
<ChildComponent
// The child component will access using actionName
actionName={this.actual_action_name}
/>
actionName is the name of the props that can be accessed by the child component. Once you trigger an action or pass the data from the child component, the same action's name will be accessed using this.props.action_name.
Let’s look at a simple example of passing the action to the child component.
<MyChildComponent
onSubmitData={this.onSubmitData}
/>
I have a parent function component which has a boolean (which is set via child component and also used to render some container on parent component).
Is the below setup fine in terms of updating and dynamic rendering based on isSomeBoolean?
const [isSomeBoolean, setisSomeBoolean] = useState(true);
const updateIsSomeBoolean = (boolVal) => {
setisSomeBoolean(boolVal);
}
<ChildComp updateIsSomeBoolean={updateIsSomeBoolean} />
{isSomeBoolean && (
<div className="container">
....
</div>
)
}
In the child component, somewhere I invoke the parent function as below;
props.updateIsSomeBoolean(false);
Yes, Passing state and controller function to the child component is very normal in react.
But always keep in mind that changing state in parent component will render both components so keep the state near to component where is it required.
In your scenario, you're going in the right direction.
I have three components each one being a parent of the other. I want to render the entire parent component upon clicking a child component. What is the correct way to achieve this?
You can update state of parent component from child component. Parent will then re-render automatically.
Or
You can pass forceUpdate method of parent component as a prop to child component. Whenever child component will call that method (e.g. on onClick handler), parent will re render.
Reference:
https://reactjs.org/docs/react-component.html#forceupdate
I have a parent component and child component called Card wrapped inside it.
Card is the third party component which render set of cards and has css transisioning affects in it like drag and change the layoout.
The issue is when the card change the layout i want to handle in parent component.
Currently card layout state is set in child which i dont have access.
How we can achieve this objective when child component layout change parent should get that change
You can pass the handle function from your parent to your child. Then, when an event on your child is triggered, you can do whatever you want (e.g. set state) on you parent component.
class Parent extends React.Component {
onChildLayoutChange = () => {
// do what you want to do with the parent component on child change here
}
render() {
return <Child onLayoutChange={this.onChildLayoutChange} />
}
}