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} />
}
}
Related
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
Lets say I have component named Vault
class Vault Component{
State : { animal: dog,color:blue}
}
Lets say I have button in component named App with a button
class App Component{
State: { animal:null,color:null}
}
<div onCLick = {goGetVaultData()} className="button">Press Me</div>
Question is how does goGetVaultData function look to extract state from a diffrent component
goGetVaultData(){
// what do I look like ?
}
If you want data from a parent component, have the parent pass it down as a prop, then access it using this.props.
If you want data from a child component, pass a function as a prop to the child. The child calls that function, and when they do you call this.setState to save the value, and access it later using this.state
If you want data from a sibling component, move the state up to whatever component is the common ancestor of the two components. That common ancestor passes props down to both components.
In my sidebar I have a list of radio buttons that should each select a component located in the main area of my app. I would like to set it so the component scrolls into view when I click the radio button that selects it, and as far as I can figure, I need to reference the component in order to scroll it into view, but I'm having trouble with this because I can't figure out how to properly pass a reference from child to parent component.
The parent component is a class component and in its constructor I set createRef() like this:
constructor(props) {
super(props);
this.myRef = React.createRef();
}
I then created a function that should be passed to child component and return ref:
getElem(ref) {
this.myRef = ref;
}
Now, inside the render of the parent component I pass the function to the child component like this:
<Designer
usedComponents={this.state.usedComponents}
myRef={this.getElem}
/>
Inside the Designer component I map the main area components and pass the ref to them like this:
const components = props.usedComponents.map((component, index) => {
return (
<div onMouseUp={() => props.selectComponent(index)} key={index}>
<DesignerComponent {...component} myRef={props.myRef} />
</div>
);
});
return components;
DesignerComponent component is determined through switch statement because each has a different set of props, but inside the switch statement I also pass myRef={props.myRef} to each individual component and then I set the ref inside each individual component like this:
<section ref={props.myRef}></section>
However, this breaks my app and gives me this error message:
"TypeError: Cannot set property 'myRef' of undefined".
What am I doing wrong?
I figured it out. The function getElem(ref) doesn't seem to do anything. I simply passed myRef={this.myRef} to the Designer component and now it works.
As we know,parent Component can not change child Component state,because state is independent and private! And the Official documents also said "In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input",then why we can use this.setState({value:this.value+1}) in parent Component to change ???I was confused about this!
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 100};
setTimeout(
() => {
this.setState({value:(this.state.value+1)});
},
1000
);
}
render() {
return (
<inpt value={this.state.value} />
//value will change from 100 to 101
//if here is a user-defined component,we must use
//componentWillReceiveProps(nextProps){this.setState({value:nextProps.value})}
// to update child component,but the DOM component doesn`t need!why??
//Does DOM component hasn`t it`s own state?
);
}
}
from the same page, you get the quote, react mentions that the form inputs are a Controlled Components, which means that the parent component of them can affect there state and it can know some information of their current state, as the onChange listener on the input, the parent component will know when the input is changed and what its new state for the value.
the opposite of this is the uncontrolled components which is a component that the parent may not know anything about its current state, as the image slider in a page, the page doesn't know what is the images that the slider renders, and it doesn't know which image is active now, until you add a handler like onImageChange, which will tell the page which image is the active now, and by that you turned it from uncontrolled component to a controlled component.
Recap:
the controlled component: a component that changes its own state, based on parent component props values, and can share some of its state information with the parent component by the callbacks that the parent passes to it as props.
the uncontrolled component: a component that doesn't change its own state, based on the props that passed to it from the parent, and doesn't share pieces of its state with the parent by the callbacks that the parent passes to it as props.
I hope that answered your question.
This is a bit of a vague question but let me try via pseudocode. If I create an array of child objects in a parent object:
class Parent extends React.Component {
constructor() {
this.state = {kids: [<Child/>,<Child/>]};
}
render () {
return <div>{this.state.kids[0]}{this.state.kids[1]}</div>
}
}
class Child extends React.Component {
...
}
If I do a setState on a Child within the Child component does/should that change the parent kids array? My thinking is that the elements of that array are the Children so changing a Child should change the element. Am I wrong in my understanding?
Unless you have a specific callback that happens when the child updates that triggers the parent, then the parent won't get that update.
This is why most React developers have adopted a smart and dumb component pattern: You really shouldn't have the state of the children managed in both components. The parent component should provide callback functions as props to the child components that handle any sort of changes that would apply to that child and then update its own state accordingly, once its state is updated it will pass the necessary parts down to each child component as props.
Your goal should be to have the least amount of state spread across your components and try to keep state managed in one component and the rest just receive props. A great article on this is: http://jaketrent.com/post/smart-dumb-components-react/