How to set variable in render with reactjs?

Question

I have a Reactjs render method and I am trying to set a variable through a function. It looks like this (you guessed it , does not work):

render() {
        let myVariable=''

        //this function changes/sets myVariable
        this.changeMyVariable()

        return (
            <div>{myVariable}</div>
        );
}

How can I set a variable that is used in my render through another function, something like the example above. I also tried to use a state variable but the changeMyVariable() function runs twice.

Probably you're chasing an anti-pattern and didn't understand the react way of thinking. — Inanc Gumus
– Inanc Gumus, Commented Nov 23, 2016 at 18:02

yadhu · Accepted Answer · 2016-11-23 10:46:59Z

34

render() {
    // assuming 'changeMyVariable' returns a value
    const myVariable = this.changeMyVariable();

    return (
        <div>{myVariable}</div>
    );
}

Actually you can invoke the function inside your JSX itself:

<div>{this.changeMyVariable()}</div>.

Note: If the output of this.changeMyVariable() never changes based on new props, it is better to compute the value outside render (avoid re-calculating when component re-renders).

edited Nov 23, 2016 at 10:46

answered Nov 23, 2016 at 10:37

yadhu

15.6k7 gold badges34 silver badges49 bronze badges

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

Comments

otorrillas · Accepted Answer · 2016-11-23 10:54:20Z

2

Although you can set local variables in the render, the use of props is recommended for better modifiability.

So, you first 'declare' the property in the component:

class ExampleComponent extends React.Component {
    static propTypes = {
        myVariable: React.PropTypes.string.isRequired,
    };    
    static defaultProps = {
        myVariable: 'Default Value'
    };

And then, you render this prop at the ExampleComponent render method:

render() {
    return (
        <div>{this.props.myVariable}</div>
    );
}

To use this prop when you render ExampleComponent:

render() {
    <ExampleComponent myVariable='example'/>
}

answered Nov 23, 2016 at 10:54

otorrillas

4,8351 gold badge24 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to set variable in render with reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related