React.js and referring autoHide as a property

Question

I have a Materialize-css component that I'm trying to convert to React. It's the DeterminatePreloader. I want to have the autoHide property on hand to set the variable show to false if autoHide is true. The autoHide, since it is a property, should be available for setting should a function call it. I would very much appreciate input. Examples I find are either too general or too specific.

Here is my code so far:

var React = require('react');

/**
 * Linear Determinate Preloader
 *
 * Materialize CSS converted to React Component
 *
 * @author samtapucar
 */

var DeterminatePreloader = <determinatePreloader autoHide={false}/>;

var DeterminatePreloader = React.createClass({

  /**
   * Initializes determinate preloader state
   * @returns {{percent: number, show: boolean}}
   */
  getInitialState: function ()
  {
    return{
      percent: 0,
      show: true
    };
  },

  /**
   * Sets determinate preloader state using received value
   * @param value
   */
  setValue: function (value)
  {
    var state = this.state;
    state.percent = value;

    if ( state.percent >= 100 ){
      this.props.autoHide = true;
    }

    if ( this.props.autoHide ) {
      state.show = false;
      this.setState(state);
    }
    else{
      this.setState(state);
    }
  },

  /**
   * Renders the determinate preloader.
   * @returns {XML}
   */
  render: function ()
  {
    var percent = this.state.percent;

    var cx = '';

    var style = {
      'width': percent + '%'
    };

    if (!this.state.show)
      cx = ' hide'


    return (
        <div className={"progress" + cx}>
          <div className={'determinate'} style={style}></div>
        </div>
    );
  }

});

module.exports = DeterminatePreloader;

Answer 1

There some issues with your code.

1. You're defining DeterminatePreloader twice. The first statement is unnecessary, because you didn't define the component yet. If you want to set the default of autoHide use the getDefaultProps method.

2. state should contain as little as possible. The method render should calculate the show variable, since it depends from percent and autoHide. I would also pass percent as props since you do not have any logic in this component.

3. state should never be overwritten directly. You should always create a new object change it with setState.

---

var React = require('react');

/**
 * Linear Determinate Preloader
 *
 * Materialize CSS converted to React Component
 *
 * @author samtapucar
 */

var DeterminatePreloader = React.createClass({
  getDefaultProps: function() {
    return {
      autoHide: false,
      percent: 0
    };
  }
  /**
   * Renders the determinate preloader.
   * @returns {ReactComponent}
   */
  render: function () {   
    var style = {
      'width': this.props.percent + '%'
    };

    var cx = '';

    if (this.props.percent >= 100 && this.props.autoHide)
      cx = ' hide';

    return (
        <div className={"progress" + cx}>
          <div className="determinate" style={style}></div>
        </div>
    );
  }

});

module.exports = DeterminatePreloader;

I would also recommend reading Thinking in React. It helps you get the right felling for programming in react.