How to display a specific amount of items from an array using React

Question

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;

bilo-io · Accepted Answer · 2021-01-19 22:10:30Z

1

To get a subset of an Array in JS, use the .slice method

Array.slice(startIndexInclusive, endIndexExclusive)

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Example:

const a = ['Hello', 'World', 'Foo', 'Bar']

console.log(a.slice(0, 1)) // prints: ['Hello']

console.log(a.slice(0, 2)) // prints: ['Hello', 'World']

console.log(a.slice(2, a.length) // prints: ['Foo', 'Bar']

console.log(a.slice(0, a.length) // prints the entire array ... note: this would be pointless, as you could just print 'a' itself

So, to incorporate your amountOfItems you'd have to just do

a.slice(startIndex, startIndex + amountOfItems)

I hope this helps somewhat.

answered Jan 19, 2021 at 22:10

bilo-io

5973 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tobiasfried · Accepted Answer · 2021-01-19 22:10:52Z

0

You can create a shallow copy of an array between any two indicies with Array.prototype.slice(). In practice, you would use this to make a truncated copy of portfolioItems from startArrayHere to startArrayHere + amountOfItemsToShow + 1, and render those items only.

answered Jan 19, 2021 at 22:10

tobiasfried

1,90212 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to display a specific amount of items from an array using React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related