Hello I’m trying to build simple application with React.
It’s simple list with cars where I have car name, price, and color.
all saw I can add anew one and delete it,
now i’m trying to add Like button when I press it around car appear border
in handleLikeCar function I’m getting the object which I heeded but
how I can add style={{border: 1px solid black }} property to this object when I click Like
There is a part of code and PrtSc
import React from 'react';
import CarList from './CarList';
import AverageCarPrice from './AverageCarPrice';
import InsertAuto from './InsertAuto';
import { maxHeaderSize } from 'http';
class App extends React.Component {
state = {
cars: [
{ auto: 'audi', price: 10000, color: '#820' },
{ auto: 'VW', price: 9000, color: '#818883' },
{ auto: 'Volvo', price: 12000, color: '#ffffff' },
{ auto: 'BMW', price: 9500, color: '#000000' }
],
temporaryObj: { auto: '', price: 0, color: '' }
};
handleLikeClick = i => {
const borderStyle = this.state.cars[i];
console.log('Clicked on this car: ', borderStyle);
};
onInsertAuto = event => {
const temporaryObj = {
...this.state.temporaryObj,
[event.target.name]: event.target.value
};
console.log(temporaryObj);
this.setState({
temporaryObj
});
};
onAddAuto = () => {
if (!this.state.temporaryObj.auto) {
return alert('Insert car name!');
} else if (!this.state.temporaryObj.price) {
return alert('Insert car Price!');
} else if (!this.state.temporaryObj.color) {
return alert('Insert car Color!');
} else {
this.setState({ cars: [...this.state.cars, this.state.temporaryObj] });
}
};
onDeleteCar = i => {
const cars = this.state.cars.filter((car, index) => index !== i);
this.setState({
cars
});
};
render() {
const carList = this.state.cars.map((car, index) => {
return (
<CarList
key={index}
index={index}
car={car}
onDeleteCar={this.onDeleteCar}
handleLikeClick={this.handleLikeClick}
/>
);
});
return (
<div className="App">
<InsertAuto
onInsertAuto={this.onInsertAuto}
onAddAuto={this.onAddAuto}
/>
<hr />
{carList}
<AverageCarPrice cars={this.state.cars} />
<br />
</div>
);
}
}
export default App;