How to get value from a react function within a react component

Question

I am new to Reacj.js and having trouble getting value back from a function. I am not sure if I am doing it right. I need the function expression "func" to return "from func" and replace {this.func}. Not sure what I am missing.

var Hello = React.createClass({

    func: function(){
        return 'from func';
    },

    render: function() {
        return <div>
                    <div>Props: {this.props.name}</div>
                    <div>Function: {this.func}</div>
               </div>;
    }
});

React.render(<Hello name="from props" />, document.getElementById('container'));

I have the js fiddle in http://jsfiddle.net/rexonms/409d46av/

Anders Ekdahl · Accepted Answer · 2015-04-17 05:12:53Z

34

You're almost there. Remember that everything inside { and } in JSX is just regular Javascript. And to get the return value from a function in Javascript, you have to call it. So something like this (notice the parens after this.func):

return (
  <div>
    <div>Props: {this.props.name}</div>
    <div>Function: {this.func()}</div>
  </div>
);

answered Apr 17, 2015 at 5:12

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

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

2 Comments

rex Over a year ago

lol... thank you much for the answer @Anders Ekdahl. Now I feel like dumob. Should have read the documentation carefully :)

Mahdi Rafatjah Over a year ago

You can go as far as doing prop={this.getcustomval.bind(this,args)()}

Collectives™ on Stack Overflow

How to get value from a react function within a react component

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related