I am setting a state into child component on event perform and want to sent this to Parent component. I searched for this on SO. But still didn't found any way to do this.
Let say i have a parent component Home, and have child component User. I am performing some event in User component, and at that time, i want to pass data to Home component. How can i do this?
Below is my code:
/* Parent component */
import React, { Component } from 'react';
import User from './user';
class Home extends React.Component{
constructor(props){
super(props)
this.state = {
isReportSent: false
}
}
render(){
<Switch>
<Route exact path="/" component={User}/>
</Switch>
}
}
/* child component */
class User extends React.Component{
constructor(props){
super(props)
}
render(){
}
}
Note: My parent component is Routing component, in which i am routing my child component on particular path. So can't pass any function to child component.
import React, { Component } from "react";
class Home extends Component {
constructor(props) {
super(props);
this.state = {};
}
onChildAPICall = result => {
console.log(result);
};
render() {
return <User onAPICall={this.onChildAPICall} />;
}
}
class User extends Component {
constructor(props) {
super(props);
this.state = {};
this.API = "https://apicall";
}
makeAnAPICall = async () => {
let result = await fetch(this.API);
this.props.onAPICall(result);
};
render() {
return <button onClick={this.makeAnAPICall}>API Call</button>;
}
}
export default Home;
Something like this would work. I'm not sure if the below is 100% functioning as I just wrote it quickly but the idea is to pass down setState() as a prop from parent to child. So when child calls setState from props it's setting state in the parent component.
class Home extends React.Component {
constructor (props) {
super(props)
this.state = {
data: []
}
}
render () {
<ChilComponent setState={this.setState} />
}
}
const User = async ({ setState }) => {
const receivedData = await getDataHowever(params)
setState({
data: receivedData
})
return (
<p>Got data!</p>
)
}
You can call callback function of parent from child component and in parent you can set the state based on callback response.
import React, { Component } from "react";
class Home extends Component {
constructor(props) {
super(props);
this.state = { }
}
setStateOfParent= result => {
this.setState({result : result});
}
render() {
return <User setStateOfParent={this.setStateOfParent} />;
}
}
class User extends Component {
constructor(props) {
super(props);
this.state = {};
this.API = "https://apicall";
}
makeAnAPICall = async () => {
let result = await fetch(this.API);
this.props.setStateOfParent(result);
};
render() {
return <button onClick={this.makeAnAPICall}>API Call</button>;
}
}
export default Home;
Your explanation is not all clear what you want to acheive but as a simple pattern you can pass the callback prop to the child component using render method of react router
Parent Component
<Route exact path="/" render={(props) => <User {...props} callback={this.callback} />}/>
Child Class
this.props.callback(data)
#user10742206 The best way is to create an independent component and include it as a child in any parent component. Then you can pass a callback function from parent and child can use it to send back any data to parent.
Related
I understand the react higher order component example from the official docs but I want to use it slightly differently if possible, with props.children - ie
<PageHoc> // Higher order component
<Route exact path="/" component={Invite} /> // I want to auto inject props here
</PageHoc>
In my page HOC I can auto render out the child component but how can I attach some new props here?
import React from 'react';
class PageHoc extends React.Component {
constructor(props) {
super(props);
}
render() {
return this.props.children
}
}
export default PageHoc;
Your PageHoc component technically is just a parent component, not a HOC as it isn't wrapping and returning a new component. But you can still inject props into children component via react's Children helper and cloneElement.
import React, { Children, Component, createElement } from 'react';
class PageParent extends Component {
constructor(props) {
super(props);
}
render() {
return Children.map(
this.props.children,
child => cloneElement(child, { injectedProp: injectedPropValue })
);
}
}
export default PageParent;
As HOC
const withInjectedProps = WrappedComponent => {
const injectedProps = {
prop1: value1,
prop2: value2,
<...etc...>
};
return <WrappedComponent {...this.props} {...injectedProps} />
}
export default withInjectedProps;
const InjectedRoute = withInjectedProps(Route);
<InjectedRoute exact path="/" component={Invite} /> // has props injected
<InjectedRoute exact path="/a" component={OtherComponent} /> // has props injected too!
Kind of depends how you need to inject the props, if you have have just a single component, many, etc..
I forgot to mention that react HOCs by convention are named starting with "with", but this isn't the rule, i.e. react-redux's connect.
react HOC docs
One way is to clone the children and override the props like this,
import React from 'react';
class PageHoc extends React.Component {
constructor(props) {
super(props);
}
doSomething = () => {
//your logic
}
render() {
const childrenWithProps = React.Children.map(this.props.children, child =>
React.cloneElement(child, { doSomething: this.doSomething })
);
return <div>{childrenWithProps}</div>
}
}
export default PageHoc;
I have a React component that I exported it like this:
class Child extends Component {
getStatus() {
return 'I am child!';
}
render() {
return (<div>Child</div>);
}
}
export default withRouter(Child)
And I have another class that needs the ref of "Child" component like this:
class Parent extends Component {
constructor(props) {
super(props);
this.childRef = createRef();
}
handleLogChildStatus = () => {
if (typeof this.childRef.current.getStatus === 'function') {
console.log(this.childRef.current.getStatus());
} else {
console.log(' Can not access to child component via ref! ');
}
}
render() {
return (
<div>
<Child ref={this.childRef} />
<div onClick={this.handleLogChildStatus}>Log child status</div>
</div>
);
}
}
This sample shows me I can not access to child component ref because it wrapped by withRouter HOC.
My question is How I can access to child ref component when it wrapped by nextjs withRouter>
I think one of below should work
export default withRouter(Child, { withRef: true })
2nd option
this.childComponent = React.createRef();
....
<Child wrappedComponentRef={c => (this.childComponent = c)} />
I want to set state of imported component. Something like
import ProductListing from '../components/ProductListing';
constructor(props){
super(props);
ProductListing = new ProductListing();
ProductListing.state = {someVariable : 'hello'};
}
Send data as props from the component where you want to use and inside the state of that component use it.
Example:
import UserInfo from './userInfo.js'
class UserDetail extends React.Component {
render()
{
return(
<UserInfo myNewState= {//define your state here} />
)
}
}
And inside UserInfo use this:
....
state= {this.props.myNewState}
If your aim is just to update the state of the child component in your case it is ProductListing. So you can do these steps
Create ProductListing as a react class so that you can create a reference for that
class ProductListing extends Component (){
state = {
items: []
}
updateStateItems = (data) => {
this.setState({ items: data })
}
render() {
return(
// your render method code code
)
}}
import ProductListing in your parent class and create a reference for that and in componentDidMount using the reference call functionupdateStateItems with data that you want to set in ProductListing state.
import ProductListing from './ProductListing'
class ParentClass extends Component (){
constructor(props){
super(props)
}
componentDidMount(){
// here use that reference to pass the data that you want to set in state
this.ref.updateStateItems(data)}
render() {
return(
<div>
<ProductListing
// to create a reference of product listing
ref={(ref) => { this.ref = ref }}
/>
</div>
)
}}
I am new in React ES6 and I think I am modifying the state in a wrong way. My code is like this when I set state on parent component:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent parentObj={this} /> // parentObj for parent context as props on child components
);
}
}
My problem is in other child components, I have to do it repeatitively, is there another way of doing it? I have no problem with React.createClass, but I want to code in es6 so i have this problem.
If you wanna pass the state {name:"helloworld"} do it like that:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent {...this.state} />
);
}
}
and in the child component you can do:
<Text>{this.props.name}</Text>
But If you want to pass the props of the component to it's child:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
render() {
return(
<ChildComponent {...this.props} />
);
}
}
and in the child component you can do:
<Text>{this.props.stuff}</Text>//place stuff by any property name in props
Now if you want to update the state of parent component from the child component you will need to pass a function to the child component:
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld"};
}
update(name){
this.setState({name:name})// or with es6 this.setState({name})
}
render() {
return(
<ChildComponent {...this.props, update: this.update.bind(this)} />
);
}
}
and then in child component you can use this : this.props.update('new name')
UPDATE
use more es6 and removed constructor
class App extends React.Component {
state = {name:"helloworld"};
// es6 function, will be bind with adding .bind(this)
update = name => {
this.setState({name:name})// or with es6 this.setState({name})
}
render() {
// notice that we removed .bind(this) from the update
return(
//send multiple methods using ','
<ChildComponent {...this.props, update = this.update} />
);
}
}
if you want to send the whole state :
return( <ChildComponent {...this.state} /> );
But this is likely a bad idea :)
edit: in your scenario, this sends a 'name' property to child component with value 'helloworld'
child of the component "this" value and how do I get to parent component?
ex:
class AComponent extends Component{
static getThis(){
return this;
}
}
class MainComp extends Component{
componentDidMoud(){
console.log(AComponent.getThis());
}
}
in this way, how do I get it?
You shouldn't get the parent component from a child component. If you need to do something (ie affect parent component state), then pass a function from the parent to the child as a prop to do it. If you need to read something, then pass the relevant data from parent to child as a prop to read it.
You can pass props down to children, whether it be a simple primitive value for the child component to use, or a function that can be used by the child component to change the state of the parent component. Here's a simple example.
ParentComponent.js
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
someState: true
};
this.someFunction = this.someFunction.bind(this);
}
someFunction() {
this.setState({
someState: false
});
}
render() {
return (
<ChildComponent aFunc={this.someFunction} aString="someValue"/>
);
}
}
ChildComponent.js
import React, { Component } from 'react';
class ChildComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={this.props.aString}>
<button onClick={this.props.aFunc}>
Some text
</button>
</div>
);
}
}