CODEWITHSUNDEEP
javascriptreactjsfunction
usergs
usergs

Reputation: 1384

Returning a variable from react functional component

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?

Upvotes: 2

Views: 30980

Answers (5)

Tholle
Tholle

Reputation: 112777

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>

Upvotes: 3

Chukwuemeka Onyenezido
Chukwuemeka Onyenezido

Reputation: 349

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.

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

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
  }
}

Upvotes: 0

Harshal Yeole
Harshal Yeole

Reputation: 4983

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
        );
     }
}

Upvotes: 0

Manoz
Manoz

Reputation: 6587

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

Upvotes: 1

Related Questions