How to set variable in render with reactjs?

Question

I have a reactjs rendermethod 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 statevariable but the changeVariable function runs twice.

Answer 1

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

Answer 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'/>
}