I am trying to run my acquisitions inside a JavaScript map, all the information is coming in, but when I put the image path on the src inside the tag img, it can't be find. Here is the code:
productSearch(prodBusca) {
const prodPerPage = 15;
const pagesVisited = this.state.pageNumber * prodPerPage;
const displayProds = prodBusca.slice(pagesVisited, pagesVisited + prodPerPage).map(prod => {
let codigo = prod.codigo.toString();
let path = `${this.imgSrc}/${codigo.substr(0, 1)}/${codigo}.jpg`;
let img = path;
return (
<li key={codigo} className="list-group-item">
<div>
<img src={img} alt={prod.descricao} width="150" height="150" />
</div>
<div>
<ul>
<li>
{prod.descricao}
</li>
<li>
{prod.preco}
</li>
</ul>
</div>
</li>
);
})
const pageCount = Math.ceil(prodBusca.length / prodPerPage);
const changePage = ({ selected }) => {
this.setState({ pageNumber: selected });
};
return (
<div>
<section className="secaoProd">
<ul className="list-group list-group-horizontal">
{displayProds}
</ul>
</section>
<div>
<ReactPaginate previousLabel={'<<'} nextLabel={'>>'} pageCount={pageCount} onPageChange={changePage}
containerClassName="paginationBttns"
previousLinkClassName="previousBttn"
nextLinkClassName="nextBttn"
disabledClassName="paginationDisabled"
activeClassName="paginationActive"
/>
</div>
</div>
)
}
The application is in ASP.Net and React