<Route exact path="/more/:id" render={props => (<More {...props} items={items} />)} />
render(){
const { id } = this.props.match.params;
const item = this.props.items[id];
return item ? this.renderItem(item) : this.renderEmpty();
}
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import '../css/more.css';
export default class More extends Component{
renderItem(item) {
const { id, title, descr, img, price } = item;
return(
<div className="more__info">
...
</div>
);
}
renderEmpty(){
return (
<div className="wrap">
<Link to="/shop" className="back">Назад</Link>
</div>
)
}
render(){
const { id } = this.props.match.params;
const item = this.props.items[id];
return item ? this.renderItem(item) : this.renderEmpty();
}
}
[7] | 3 // 7
[1]|1
[0]|0