React components as instances like in OO programming

Question

I created React component using React.creatClass ()

module.exports = React.createClass({ // input-field-units.jsx is the file name
    displayName: 'input-field-units',
    render: function () {
        return (
            <div >
                <form className="form-inline" role="form">
                    <div className="implement-width-select">
                        <input id={inputid} type="number" className="form-control" onChange={this.onChangeTest}></input>
                        <div className="form-group">
                            <select id="implement-width-unit" className="form-control" defaultValue="m" onChange={this.onChangeTest} >
                                <option value="m" >m</option>
                                <option value="mm">mm</option>
                                <option value="ft">ft</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        );
    },
    componentWillMount: function(){
        inputid = this.props.inputid;
        console.log("component: " + inputid);
    },
    onChangeTest: function(){
    $(document).ready(function () {
        var _unit = document.getElementById("implement-width-unit").value;
        var _widthValue = document.getElementById(inputid).value;
//processing of code here..
});

I intend to call this component like objects in C# where values of properties are not shared if this is called several times. here inputid is set from this.props.inputid in componentWillMount()

Im using this component on several places in my application (distributed code is in a single file). In my .jsx file I am doing this

var InputFieldUnitsComponent = require('../Components/input-field-units.jsx');
var ImplementWidthID = "Implement-Width-ID", againWidthID = "again-width-id";

module.exports = React.createClass({
    displayName: 'PathPlannerSidebarHeader',
    render: function () {
        return (
                <div>
                <h2 className="sidebar-header-subtitle">Implement Width</h2>
                <InputFieldUnitsComponent
                   inputid= {ImplementWidthID} // 1st call
                />
                <h2 className="sidebar-header-subtitle">again Width</h2>
                <InputFieldUnitsComponent
                   inputid= {againWidthID} 
                />
                </div>
        );
        //....
        })

so that everytime I have a new this.props.inputid to set id of but the problem is this.props.inputid maintains same value change and hold the last value. eg in this case inputid will have "again-width-id" even when I want to use for 1st time I called the component.

In short I like OO behavior where the properties of objects are not shared with each other.

Please ask if this doesn't make sense I will explain

Answer 1

You essentially made inputid a global variable by not declaring it with var (or const or let).

You could say this.inputid in componentDidMount, but that doesn't make a lot of sense: why have the same value as both this.inputid and this.props.inputid

It's simpler to just use this.props.inputid consistently. If you want to simplify render(), define it as a local variable in there.

I suggest to install eslint and enable it in your editor to find this kind of errors.

---

You also need to update the function onChangeTest. It's not correct to try something like:

 onChangeTest: function() {
   $(document).ready(function () {
     var _widthValue = document.getElementById(this.inputid).value;
   });
 }

onChangeTest is a method of your react class, but the anonymous function that you're passing to ready() isn't, and it can't refer to your react component via this... unless you bind it!

 onChangeTest: function() {
   $(document).ready(function () {
     var _widthValue = document.getElementById(this.inputid).value;
   }.bind(this));
 }

or with the ES6 syntax:

 onChangeTest: function() {
   $(document).ready(() => {
     var _widthValue = document.getElementById(this.inputid).value;
   });
 }

Obligatory reading: How does the "this" keyword work?