how to pass variable from a function to render function in react

Question

I am new in react. following a tutorial, where they are introducing state to find out wheather checkbox is checked or not. But i wanted to do that in this style:

<script type="text/babel">
  var Checkbox = React.createClass({
    change: function(){
      var msg;
      var val= document.getElementById('check').checked;
      if(val==true){
        msg = 'checked';
      }else{
        msg = 'Not checked';
      }
    },
    render: function(){
      return(<div>
          <input onChange={this.change} id="check" type="Checkbox" />
          <p>Checkbox is {this.msg}.</p>
        </div>);
    }
  });
  ReactDOM.render(<Checkbox/>, document.getElementById('container'));
</script>

so, the problem is i cant pass the variable "msg" into render function.

why not using state variable? if you don't use state and setState then your component will not get re-rendered and msg part will not update in ui. — Mayank Shukla
– Mayank Shukla, Commented Jun 8, 2017 at 20:47
You should set that on the state with setState function.. Also, createClass is deprecated. — enapupe
– enapupe, Commented Jun 8, 2017 at 20:47

Kavita · Accepted Answer · 2017-06-08 20:56:20Z

2

If you want to render the message in UI, then msg should be set in state using setState function, so that re-render can happen.

For any other case where re-render is not required, variable can be created as class variable inside constructor and use in any function.

constructor(props){
super(props);
this.myVariable='';
}

answered Jun 8, 2017 at 20:56

Kavita

512 bronze badges

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

Collectives™ on Stack Overflow

how to pass variable from a function to render function in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related