Instead of showing every single item inside 'portfolioComponents', I want to show a specific amount of items, from a specific number ('startArrayHere') in the array, and raise and lower from which number ('startArrayHere') I start showing items from the Array. I know the For-Loop is wrong, but I just can't figure out how to do it - can anybody help me out here?
class Portfolio extends Component {
constructor(){
super ()
this.state = {
portitems: portfolioItems,
startArrayHere: 0,
amountOfItemsToShow: 6
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
if(this.state.startArrayHere < (portfolioItems.length -
this.state.amountOfItemsToShow))
this.setState(prevState => {
return {
startArrayHere: startArrayHere + 1
}
})
}
render(){
const portfolioComponents = this.state.portitems.map(item =>
<PortfolioTemp key={item.id} portfolioitem={item} />)
return (
<div>
<button onClick={() => this.handleClick()}>STATE CHANGE</button>
<div className="portfolio-container">
{
for (let i = 0; i < this.state.amountOfItemsToShow; i++){
portfolioComponents[i + this.state.startArrayHere]
}
}
</div>
</div>
)
}
}
export default Portfolio;