How ReactJs component could retrieve var from componentWillMount?

Question

var React = require('react');

var SomeComponent = React.createClass({
componentWillMount: function() {
    someVariable = "Variable";
    return someVariable
},
    render: function() {
        return (
            <div>{someVariable}</div>
        );
    }

});

module.exports = SomeComponent;

how component could retrive someVariable from componentWillMount?

Answer 1

Your example works because you're defining a global variable that the render method then can access. This is typically bad. What I think you're really after is setting this variable on the initial state of your component.

var SomeComponent = React.createClass({
   getInitialState: function () {
      return {someVariable: 'Variable'};
   },
   render: function () {
      return <div>{this.state.someVariable}</div>
   }
});

Setting state with this.setState within componentWillMount is fine as well but will override any initial state your component has since the render will still only execute once therefore it makes more sense to do it within getInitialState if it's something that's supposed to be local to the component.