Returning a variable from react functional component

Question

I have a react component as :

class ModulesListing extends React.Component {
  render(){
    const module = this.props.module;
    getModuleCode(module){
       var moduleCode = 0;
       // Do relevant calls and get moduleCode
       return moduleCode;
    }
    return (
      //Info to display
    );
  }
}

Here, I need to get the value of moduleCode within return() and assign it to a variable to do further processing. when I assigned as,

var moduleCode = this.getModuleCode(module);

it returns an undefined object. What is the correct way of returning a value from a function?

Answer 1

You could get the code in componentDidMount and store it in state instead.

Example

 function doCall() { return new Promise(resolve => setTimeout(() => resolve("code"), 1000)); } class ModulesListing extends React.Component { state = { code: null }; componentDidMount() { this.getModuleCode(); } getModuleCode = module => { doCall(this.props.module).then(code => { this.setState({ code }); }); }; render() { const { code } = this.state; if (code === null) { return null; } return <div> {code} </div>; } } ReactDOM.render(<ModulesListing />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

Try calling a function in ComponentDidMount() as

componentDidMount(){
  this.getModuleCode(this.props.module);
}

and put moduleCode in state so that you can receive it after it calls didmount .

like

  getModuleCode(module){
     var moduleCode = 0;
     // Do relevant calls and get moduleCode
     this.setState({moduleCode});
  }

receiving it in render - this.state.moduleCode

Answer 3

You can define a state and set the state in getModuleCode function an use it wherever you want.

class ModulesListing extends React.Component {

    componentDidMount(){
        this.getModuleCode(this.props.module);
    }

    render(){
       const module = this.props.module;
       getModuleCode = (module) => {
          var moduleCode = 0;
          // Do relevant calls and get moduleCode
          this.setState({moduleCode})
       }
       return (
            const {moduleCode} = this.state;
            //Info to display
        );
     }
}

Answer 4

getModuleCode must reside outside render function and binded to "this" contex through bind or arrow function

 class ModulesListing extends React.Component { getModuleCode = (module) => { const moduleCode = 0; // Do relevant calls and get moduleCode return moduleCode; } render(){ // render } } 

Answer 5

If you want to use var moduleCode = this.getModuleCode(module); in your render function, you will have to define getModuleCode(module) as a method in the component class and not in the render function.

class ModulesListing extends React.Component {
  getModuleCode(module){
       var moduleCode = 0;
       // Do relevant calls and get moduleCode
       return moduleCode;
    }
  render(){
    const module = this.props.module;
    var moduleCode = this.getModuleCode(module);
    return (
      //Info to display
    );
  }
}

Hope that helps.