I want to display a certain number of items from an array and when the user clicks for example "show next" the next five items of the array will be visible, like items 6-10, where the items 0-5 will be hidden e.g. there should ALWAYS only be five items visible. How can I do that?

I tried the following nut with no success (see JSFIDDLE here)

class Cars extends React.Component{
   constructor(){
   super()

   this.state = {
      limit: 5,
      cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
   }
 }

  showPreviousCars() {
    // show previous 5 items
  }

  showNextCars(){
    this.setState({
       limit: this.state.limit + 5
    })
  }


 render(){
    let cars = this.state.cars.slice(0,this.state.limit);
    return(
       <div className="car-wrapper">
         <ul>
           <li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
           {cars.map((car, i) => {
              return(
                <li key={i}>{car}</li>
              )

           })}
           <li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
        </ul>

      </div>
    )
  }
}

Any suggestions are wele!

I want to display a certain number of items from an array and when the user clicks for example "show next" the next five items of the array will be visible, like items 6-10, where the items 0-5 will be hidden e.g. there should ALWAYS only be five items visible. How can I do that?

I tried the following nut with no success (see JSFIDDLE here)

class Cars extends React.Component{
   constructor(){
   super()

   this.state = {
      limit: 5,
      cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
   }
 }

  showPreviousCars() {
    // show previous 5 items
  }

  showNextCars(){
    this.setState({
       limit: this.state.limit + 5
    })
  }


 render(){
    let cars = this.state.cars.slice(0,this.state.limit);
    return(
       <div className="car-wrapper">
         <ul>
           <li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
           {cars.map((car, i) => {
              return(
                <li key={i}>{car}</li>
              )

           })}
           <li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
        </ul>

      </div>
    )
  }
}

Any suggestions are wele!

• javascript
• reactjs

Share Improve this question Follow asked Jan 23, 2018 at 15:45 ST80ST80 3,9131717 gold badges7272 silver badges145145 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can use Array.prototype.slice (check the documentation here to know what arguments to pass) to work with a portion of your array:

cars.slice(this.state.limit, this.state.limit + 5).map(...)

Edit: two things:

• I see you are using limit as the upper boundary, so either change that or use slice(this.state.limit - 5, this.state.limit)
• You might want to update your showNextCars function too, to make sure you don't end up out of your array bounds

Use offset and limit

class Cars extends React.Component{
       constructor(props){
       super(props)

       this.state = {
          limit: 5,
          offset:0,

          cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
       }
     }

      showPreviousCars() {
        // show previous 5 items
      }

      showNextCars(){
        this.setState({
           offset:this.state.limit
           limit: this.state.limit + 5,

        })
      }


     render(){
        let cars = this.state.cars.slice(this.state.offset,this.state.limit);
        return(
           <div className="car-wrapper">
             <ul>
               <li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
               {cars.map((car, i) => {
                  return(
                    <li key={i}>{car}</li>
                  )

               })}
               <li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
            </ul>

          </div>
        )
      }
    }