Делаю приложение на реакте, суть в том, чтобы когда пользователь вводил сумму и название марки машины, должен появляться список машин, подходящих под сумму и марку. Но после обновления данных в форме, если ввести другую марку или вовсе очистить оба поля, блоки не уходят, как можно это исправить?
enterValue = (e) => {
e.preventDefault();
const price = document.querySelector('.price'),
model = document.querySelector('.model');
if (price.value != false || model.value != false) {
this.setState({
userMoney: price.value,
model: model.value,
});
}
}
renderItems(arr, money, model) {
return arr.map(item => {
const { name, src, price, dopname, id } = item;
if (money >= (+price) && model.toLowerCase() == name.toLowerCase()) {
return (
<div key={id} className="block-cars">
<img className='range' src={src} style={{ width: "200px", height: '150px' }} />
<div className='descr'>
<span>Name: {name}</span>
<span>Model: {dopname}</span>
<span>Price: {price}</span>
</div>
</div>
)
}
});
}
render() {
const { posts, userMoney, model } = this.state;
const items = this.renderItems(posts, userMoney, model);
return (
<div className='container'>
<div className="left">
<form className='forms' onSubmit={this.enterValue}>
<input className="price" />
<input className="model" />
<button>Submit</button>
</form>
</div>
<div className="right">
{items}
</div>
</div>
)
}