Я решил одну проблему в этой топи c: Как получить доступ к следующему / предыдущему объекту внутри карты - отреагировать?
, и у меня есть еще одна:
Генератор всех ссылок:
someArrCars.map( el => <Route path={el.link} component={() => <OnePageCar carVin={el.vin} key={el.vin}/>}
Я хотел бы разделить автомобили на категории, и я не знаю, как сделать категорию зависимой от ссылок.
someArrCars = [{name: 'somecar1', link: 'somelink1', vin: '123', category: 'van'}, {name: 'somecar2', link: 'somelink2', vin: '345', category: 'van'},...];
Пример:
<Route exact path={"/van"} component={() => <CarCategory category={"van"}/>}/>
категория сайта:
class CarCategory extends Component{
render(){
const {category} = this.props;
let sortCategory = someArrCars.filter( el => el.category === category );
return(
<>
{sortCategory.map (el => {return (
<React.Fragment key key ={el.vin}>
<Link to ={el.link}>Some VAN Car</>
<Link to ={el.link}>Another VAN Car</>
<Link to ={el.link}>Next VAN Car</>
)}
</>)
}
}
После нажатия у меня появятся все машины, т.е. ссылки не будут соответствовать категории.
export default class OnePageCar extends Component {
render() {
const { carVin } = this.props;
someArrCars.map((el, index) => {
if (el.vin === carVin) {
let prev = someArrCars[index-1];
let next = someArrCars[index+1];
if (next === someArrCars[someArrCars.length]){
next = someArrCars[0];
}
if (prev === undefined){
prev = someArrCars[someArrCars.length-1];
}
}
return (
<React.Fragment key={el.vin}>
<Link src={prevEl.link} />
<Link src={nextEl.link} />
</React.Fragment>
);
}
});
}
}
Кнопка «Далее / предыдущий» будет неправильным в категории, потому что в нем будут все автомобили.