pass data react
//place where you will send
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push({
pathname: "/home",
state: {name : 'demo'},
});
//place where you will get data
import { useLocation } from 'react-router';
const location = useLocation();
console.log(location.state);pass data to component react
// Imagine the directory structure of the app as follows:
// The parent component actually renders the child components in the app.
App
└── Parent
├── Child
└── Child2
// Parent Component: Functional Component
const Parent = () => {
const [data, setData] = useState('');
const parentToChild = () => {
setData('This is data from Parent Component to the Child Component.');
};
return (
<div className="App">
<Child parentToChild={data}/>
<div>
<Button primary onClick={() => parentToChild()}>
Click Parent
</Button>
</div>
</div>
);
};
// Child Component: Functional Component
const Child = (parentToChild) => {
return (
<div>
{parentToChild}
</div>
)
}
// Parent Component: Class Component
class Parent extends React.Component {
state = { data: 'Hello World' };
render() {
return (
<div>
<Child /> //no data to send
<Child2 dataFromParent={this.state.data} />
</div>
);
}
}
// Child2 Component: Class Component
// Use the variable this.props.dataFromParent
// to obtain the data passed from parent to child.
class Child2 extends React.Component {
render() {
return <div>Data from parent is:{this.props.dataFromParent}</div>;
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
