This content originally appeared on DEV Community and was authored by Zaw Zaw Win
Before starting the topics let me tell me this is a hack I just found this today when I am doing my project.I facing a problem when I am trying to change data from child to parent .I remember I only know pass props from parent to child but I need to pass props from child to parents..Let's get started !
Requirements need to understand
- What is props
Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.
- What is state
State is similar to props, but it is private and fully controlled by the component.You can make dynamic data using state.
source
Okay Now! Let't go into code .....
import { Component } from "react";
import Child from "./child";
class Parent extends Component {
constructor(props) {
super(props);
this.state = { name: "Parend" };
}
render() {
return <Child name={this.state.name} />;
}
}
** In this parent component we have set the this.state.name = "parent" and pass its to child component using *** name *** attribute the value inside it call props.
import { useState } from "react";
const Child = ({name})=>
{
const [Name,setName] = useState(name);
return(
<>
<h1 onClick={()=>setName("Child")}>{Name}</h1>
</>
)
}
export default Child;
First We destructer the value of props from parent component .Then we set a state Name to default value that come from parent and a event onClick to h1 when we click the h1 the value of parents of state value will change into child .
Demo link
Thus all for today If you found useful please share it to someone and I am waiting to see your feedback.Follow me on twitter
PS: I am just starting writing articles if any mistake feedback are welcome.
This content originally appeared on DEV Community and was authored by Zaw Zaw Win
Zaw Zaw Win | Sciencx (2021-10-08T17:28:29+00:00) How to pass props object from child component to parent. Retrieved from https://www.scien.cx/2021/10/08/how-to-pass-props-object-from-child-component-to-parent/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.