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?

@Harikrishnan, function getModuleCode() is returning an integer which needs to be used in render() method. How can I get that value and stored in a varible — usergs
– usergs, Commented Jul 16, 2018 at 12:27

Tholle · Accepted Answer · 2018-07-16 12:32:04Z

3

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>

answered Jul 16, 2018 at 12:32

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

2 Comments

usergs Over a year ago

It works fine, there is another instance like I am getting list of modules as props. I need to run a loop to get moduleCode for each module within render. In that case which could be the feasible solution

Tholle Over a year ago

@usergs Great. That changes the question entirely. Please accept an answer to this question and create a new question if you have further issues. You could do something like this.

Manoz · Accepted Answer · 2018-07-16 12:27:58Z

1

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

answered Jul 16, 2018 at 12:27

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Comments

Harshal Yeole · Accepted Answer · 2018-07-16 12:30:44Z

0

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

answered Jul 16, 2018 at 12:30

Harshal Yeole

5,0311 gold badge24 silver badges43 bronze badges

Comments

Mosè Raguzzini · Accepted Answer · 2018-07-16 12:30:59Z

0

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

answered Jul 16, 2018 at 12:30

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Comments

Chukwuemeka Onyenezido · Accepted Answer · 2018-07-16 12:31:39Z

0

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.

answered Jul 16, 2018 at 12:31

Chukwuemeka Onyenezido

3592 silver badges5 bronze badges

1 Comment

usergs Over a year ago

Tried this way, when printed moduleCode in console, it says undefined

Collectives™ on Stack Overflow

Returning a variable from react functional component

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related