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

Try changing className{this.getClass} to className={'className' + this.getClass()}. — Hunan Rostomyan
– Hunan Rostomyan, Commented Dec 1, 2015 at 2:00
Functions are called with (). If you don't call this.getClass, it won't work. — Felix Kling
– Felix Kling, Commented Dec 1, 2015 at 2:36

pseudoramble · Accepted Answer · 2015-12-07 01:21:31Z

15

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

edited Dec 7, 2015 at 1:21

answered Dec 1, 2015 at 2:01

pseudoramble

2,57122 silver badges29 bronze badges

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

2 Comments

AmirHossein Rezaei Over a year ago

Is it possible to send div element to getClass() as parameter?

pseudoramble Over a year ago

@AmirHosseinRezaei I'm not 100% sure I understand your question, but you could in theory rewrite getClass to accept a node and work on it in getClass. You would have to first assign the div to a variable, update getClass to accept a param, and then call it. I'm really unsure about why you would do that to be honest. Why would you need the div to decide what class it should have?

Henrik Andersson · Accepted Answer · 2015-12-01 04:11:37Z

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()}.

edited Dec 1, 2015 at 4:11

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

answered Dec 1, 2015 at 2:03

Hunan Rostomyan

2,1762 gold badges22 silver badges31 bronze badges

Comments

Ivan K. · Accepted Answer · 2023-01-13 02:48:09Z

0

functional component

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

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

answered Jan 13, 2023 at 2:48

Ivan K.

1,12412 silver badges12 bronze badges

Collectives™ on Stack Overflow

call function inside of className react.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related