call function inside of className react.js

Question

How do I call the function for getClass for the className inside this example? The way I have it written out does not seem to call getClass .

var CreateList = React.createClass({
    getClass: function() {
        //some code to return className
    },
    render: function() {
        return(
            <div className{this.getClass}>Example</div>
        );
    }
});

Answer 1

You're referencing the instance of the getClass() function as opposed to calling the function. Try tweaking it like so:

render: function() {
    return(
        <div className={this.getClass()}>Example</div>
    );
}

Answer 2

className{this.getClass} won't compile. Try this:

var CreateList = React.createClass({
    getClass: function() {
        //some code to return className
    },
    render: function() {
        return(
            <div className={this.getClass()}>Example</div>
        );
    }
});

If you want the div to have a class name that starts with 'className', then prepend that string to the result of the call: className={'className' + this.getClass()} .

Answer 3

functional component

const statusColor = () => {
    return 'red';
  };

<span className={statusColor()}>your text</span>