I'm trying to show an item in a product component, and everything works fine using react-router-dom (Routes), but when I reload the page I lose the data and the items are gone. I know that is because of the match object from react-router-dom
The way I'm doing all is passing the id of the item as argument to my getById action, the problem is that the id that I'm passing is from the match.params object
Product Component
class Producto extends Component {
static propTypes = {
getById: PropTypes.func.isRequired,
item: PropTypes.object.isRequired
}
componentDidMount(){
this.props.getById(this.props.match.params.id);
}
render() {
const [item] = this.props.item.items;
return (
<Container>
<Row>
<Col sm="12" md="8">
<h3>{item.nombre}</h3>
</Col>
<Col sm="12" md="4">
<h3>{item.precio}</h3>
</Col>
</Row>
</Container>
)
}
}
const mapStateToProps = state => ({
item: state.item
})
export default connect(
mapStateToProps,
{getById}
)(Producto);
Recents component
This component shows the recent products
items.map( item => (
<Col>
<Card>
<CardImg top width="100%" src= {`../../../${item.imagenes[0].path}`}></CardImg>
<CardBody>
<CardTitle>
<NavLink><Link to={`/producto/${item._id}`}>{item.nombre}</Link></NavLink>
</CardTitle>
<CardText>{item.descripcion}</CardText>
<Button>Comprar</Button>
</CardBody>
</Card>
</Col>
))
Finally my getById action
export const getById = id => dispatch => {
axios
.get(`/api/items/${id}`)
.then(res => {
dispatch({
type: GET_ITEMS_BY_ID,
payload: res.data
})
});
}
If you want more context about this is my git repository: