Call a method in another Component that returns some value in React

Question

I am having two independent components in react and I want to call a method in first component that returns Some value to another component.

import React from 'react';
export default class A extend React{
    constructor(props){
     super(props);
    }

    getName = () =>{
       var name = "MyName";
       return name;
    }
    render(){
      //Some code to render
    }
}

Now In component B in want to call method getName() so that it returns name,which i want to use in component B.

import React from 'react';
export default class B extends React{
    constructor(props){
     super(props);
    }
    getName = () =>{
      //Want to call the getName method of component A here
    }

    render(){
      //Some code to render
    }

}

Do you use redux or context inside your project? maybe you can pass it via it? — Oleksandr Paiziak
– Oleksandr Paiziak, Commented Dec 29, 2019 at 13:30

k1r4n · Accepted Answer · 2019-12-29 13:59:45Z

1

Use React lifting State Up.

Here is the official documentation.

Lifting State Up

answered Dec 29, 2019 at 13:59

k1r4n

1576 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Junius L Over a year ago

but we don't know how OP is rendering these compoents.

k1r4n Over a year ago

You can keep the value in the parent component's state and pass it to both child components. Then you can keep a function to update the value of that particular state variable in parent and pass it down to component A so when when you update the value in component a it will call the fucntion which is passed down as prop from parent component to component A which will update the value in parent component. and will get reflected in both the child. I will add a sample code, which I guess will work for you.

k1r4n Over a year ago

Please copy it to a text editor

import React, {Component, Fragment} from 'react'; import A from './A'; import B from './B'; export default class Parent extend Component{   state = {     data: 0,   }    updateData = (data) => {     this.setState({data});   }    render () {     const {data} = this.state;     return (       <Fragment>         <A data={data} updateData={this.updateData} />         <B data={data} />       </Fragment>     );   } }

k1r4n Over a year ago

Please copy it to a text editor Component A

import React, {Component} from 'react'; export default class A extend Component{    updateData = () => {    const {data, updateData} = this.props;     updateData(data);   }    render () {     const {data} = this.state;     return (         <div onClick={this.updateData}>{data}</div>     );   } }

k1r4n Over a year ago

Please copy it to a text editor Component B

import React, {Component} from 'react'; export default class B extend Component{    render () {     const {data} = this.state;     return (         <div>{data}</div>     );   } }

|

Collectives™ on Stack Overflow

Call a method in another Component that returns some value in React

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related