CODEWITHSUNDEEP
javascriptreactjs
carl
carl

Reputation: 396

How to color an input box depending on the size of varible in ReactJs?

I have an input box which is disabled. It gets a variable x which is sometimes < 1 or > 1. I want to color the background with red if x > 1, green if x < 1 and greyas a default (without a value). I tried this:

    <Field name="testValue" type="number" component={Input} label="Value:"
 onChange={this.changeColor()} id="test"/>

the method changeColor():

changeColor() {
        let num = document.getElementById("test");
        if(myValue === "") {
            num.css("backgroundColor", "grey");
        } else if(myValue  < 1) {
            num.css("backgroundColor", "green");
        } else {
            num.css("backgroundColor", "red");
        }
    }

and in the constructor: this.changeColor = this.changeColor.bind(this); Unfortunately I am getting: Cannot read property 'css' of null What I am doing wrong? Is it the correct way? Any help or suggestions is very appreciate.

Upvotes: 0

Views: 1457

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104369

onChange expect a function but you are assigning the value returned by the function, instead of that write it like this remove ():

<Field 
   name="testValue" 
   type="number" 
   component={Input} 
   label="Value:"
   id="test"
   onChange={this.changeColor} 
/>

But i will suggest you to use these conditions on style tag instead of using document.getElementById('text') then applying css on that, we should avoid the direct dom manipulation with react.

Store the value of input field in state variable myValue then write it Like this:

changeBGColor() {
    let myValue = this.state.myValue;
    if(myValue === "") {
        return "grey";
    } else if(myValue  < 1) {
        return "green";
    } else {
        return "red";
    }
}

<Field 
   name="testValue" 
   type="number" 
   style={{backgroundColor: this.changeBGColor()}}
   component={Input} 
   label="Value:"
   id="test"
   onChange={this.changeColor} 
/>

Upvotes: 1

atomrc
atomrc

Reputation: 2583

You mentioned that you used React to render your component. So you should keep in mind, if you are building a React app, that you should not use the document anywhere in your code.

Anyway, to answer your question, if you need to render differently according to some value, in react, that value should live in the state of your component.

In the changeColor callback, you should read the value of the input and write it to the state of the component:

changeColor(event) {
   // event.target is the dom element that emitted the event
   this.setState({ inputValue: event.target.value });
}

And then, in your render function, you just give the color to the input depending on the value of the state:

render() {
   var fieldColor = "red";
   if (this.state.inputValue === "") {
     fieldColor = "grey";
   } else if (this.state.inputValue < 1) {
     fieldColor = "green";
   }
   <Field style={ color: fieldColor } onChange={this.changeColor}/>
}

This way your render depends on the state of the component and the color updates as the user types in.

Now I'd suggest changing the name of the method changeColor to something more relevant to what the new function is doing, something like updateTestValue maybe?

Upvotes: 0

Related Questions