Как я могу сравнить, если реквизиты между двумя отдельными компонентами имеют одинаковое значение?
1- Является ли то, что я ищу, выполнимым?
2- Если нет, как еще я могу выполнить задание ниже:
История:
У меня есть массив автомобильных объектов.Название каждого автомобиля отображается как <li /> на компоненте <CarList />.При нажатии на каждый <li/> цвет автомобиля раскрывается
У меня есть компонент <Question />, который отображает: "Какой автомобиль (здесь случайный цвет)"?
Изменение пользовательского интерфейса: Как можно написать метод, который:
- Проверяет, является ли props.color
<CarList /> === props.colorиз <Question /> - Затем запускается изменение пользовательского интерфейса, например:
- onClick :
If цвет автомобиля соответствует цвету вопроса: измените <li /> назеленый (то есть: цвет фона), else изменить его на красный.
Я изо всех сил (интересно, если это возможно), чтобы сравнить реквизит из разных компонентов + написание метода, который проверяет и выполняетизменение интерфейса выше.
Этот код отражает объяснение, приведенное выше: Также вот песочница
// Garage
export default class Garage extends Component {
state = {
cars: [
{ name: "Ferrari", color: "red", id: 1 },
{ name: "Porsche", color: "black", id: 2 },
{ name: "lamborghini", color: "green", id: 3 },
{ name: "McLaren", color: "silver", id: 4 },
{ name: "Tesla", color: "yellow", id: 5 }
]
};
handleShuffle = () => {
this.setState({
cars: [...this.state.cars.sort(() => Math.random() - 0.5)]
});
};
render() {
const { cars } = this.state;
const car = cars.map(car => (
<CarList key={car.id} make={car.name} color={car.color} />
));
const guess = cars
.slice(2, 3)
.map(car => <Question key={car.id} color={car.color} />);
return (
<>
<div>{guess}</div>
<button onClick={this.handleShuffle}>load color</button>
<ul>{car}</ul>
</>
);
}
}
// CarList
class CarList extends Component {
state = {
show: false
};
handleShow = () => {
this.setState({ show: true });
console.log(this.props);
// check for props equality here
//desired result for <li /> would be
// className={ correctColor ? 'green' : 'red'}
};
render() {
console.log("car color props:", this.props.color);
const { make, color } = this.props;
const { show } = this.state;
return (
<li onClick={this.handleShow}>
{make}
<span className={show ? "show" : "hide"}>{color}</span>
</li>
);
}
}
// Question
const Question = ({ color }) =>
console.log("question color prop:", color) || <h1>What car is {color}</h1>;