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) =>
| {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;
}
