# react with css styling

**URL:** https://forum.kirupa.com/t/react-with-css-styling/635625
**Category:** Uncategorized
**Created:** [December 6, 2016, 7:50am UTC](https://forum.kirupa.com/t/react-with-css-styling/635625 "2016-12-06T07:50:32Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![92ak](https://avatars.discourse-cdn.com/v4/letter/9/a88e4f/32.png) [@92ak](https://forum.kirupa.com/u/92ak)
#### Post date: [December 6, 2016, 7:50am UTC](https://forum.kirupa.com/t/react-with-css-styling/635625/1 "2016-12-06T07:50:33Z")

</div>

i wrote some code , i want to see each item in red ,orange ,green colors based on the condition i wrote. can anyone help

* * *

import React from ‘react’;  
import logo from ‘./logo.svg’;  
import ReactDOM from ‘react-dom’;  
import ‘./App2.css’;

function Bill(props)  
{  
const product = props.pay;  
const purchase=product.map((product) =\>

{product.item}-{product.amount}-{product.styles}

 ); return (

| {purchase} |

);

}

class Task2 extends React.Component {  
constructor(props)  
{  
super(props);  
this.state = {  
itemstyle:’’,  
item:’’,  
amount:’’,  
product:[] // array to collect submitting values  
};  
this.\_itemHandle=this.\_itemHandle.bind(this);  
this.\_itemSubmit=this.\_itemSubmit.bind(this);  
this.\_valueHandle=this.\_valueHandle.bind(this);  
}

```
/*-----------------------------------------------------------------*/     
  _itemHandle(e) //to handle item selection
    {
      this.setState({item:e.target.value});
    }

```

/_-----------------------------------------------------------------_/

```
 _valueHandle(e) // to handle values inside textbox
    { 
      this.setState({amount:e.target.value})  
      let itemvalue = e.target.value;
      let itemcolor
      if(itemvalue <= 5000)
        {
          itemcolor="green";
         
        }
      else if(itemvalue>5000 && itemvalue < 10000)
        {
          itemcolor="orange";
          
        }
      else
       {
         itemcolor="red";
         
       }
     this.setState({itemstyle:itemcolor});
    }

```

/_-----------------------------------------------------------------_/

```
_itemSubmit() // to handle submit
  {
     var Buy = {
        item:this.state.item,
        amount:this.state.amount,
        itemstyle:this.state.itemstyle
     } 
    
        this.setState((collect) => ({                 
        product:collect.product.concat(Buy),
        item:'',
        
    }));
      
    // this.setState({product:product.push(Buy)});
  }

 render() {
  return (

     <div>
       <div>     
         <select onChange={this._itemHandle}>
         <option >select value</option>
           <option>TV</option>   
           <option>FRIDGE</option>   
           <option>AC</option>   
           <option>CD PLAYER</option>
        </select>
           <input type="text" onChange={this._valueHandle}/>
      </div> 
      <div>
          <button onClick={this._itemSubmit}>Submit</button>
      </div>
      <div><Bill pay={this.state.product} styles={this.state.itemstyle}/></div>
   </div>
    
 
); 

```

}

}

export default App2;

* * *

App2.css

.wrapper  
{  
text-align: center;

}  
.green{  
color:green;  
}  
.red{  
color:red;  
}  
.orange{  
color:orange;  
}  
.table{  
border: 1px solid;  
}  
.tr{  
border: 1px solid;  
}

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 8, 2016, 7:13am UTC](https://forum.kirupa.com/t/react-with-css-styling/635625/2 "2016-12-08T07:13:10Z")

</div>

Somewhere in your code you need to the set the `className` attribute to `{this.state.itemstyle}`. I am not seeing you set that anywhere. Could that be what you are trying to do with the `styles` attribute you are setting?

🙂