I'm currently trying to create a ponent that show some of the state but show more once a button is clicked. Each time a button is clicked it should show 3 more items.

I tried a few different things, here is my current code: Any help and explanation is appreciated:

import React from 'react';
import { render } from 'react-dom';
class ShowSomeItems extends React.Component {
  constructor() {
    super()
      this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
}


showMore = () => {
    let numberToincrementBy = 3;
    if(this.state.numberOfitemsShown < this.state.car.length){
     itemsToShow = this.cars.slice(0, incremenrIndex)
      numberToincrementBy+3
      return itemsToShow
    }
  }

render() {

    let itemsToShow = "Loading...";  
       if(this.state.numberOfitemsShown){
         itemsToShow =  for(let x = 0; x < 5; x++) {
        <li key={x}>{this.state.cars[x]['name']}</li>
       }
  }

return (
      <div>
        <ul>
         {itemsToShow}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}


render(<ShowSomeItems />, document.getElementById('root'));

I'm currently trying to create a ponent that show some of the state but show more once a button is clicked. Each time a button is clicked it should show 3 more items.

I tried a few different things, here is my current code: Any help and explanation is appreciated:

import React from 'react';
import { render } from 'react-dom';
class ShowSomeItems extends React.Component {
  constructor() {
    super()
      this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
}


showMore = () => {
    let numberToincrementBy = 3;
    if(this.state.numberOfitemsShown < this.state.car.length){
     itemsToShow = this.cars.slice(0, incremenrIndex)
      numberToincrementBy+3
      return itemsToShow
    }
  }

render() {

    let itemsToShow = "Loading...";  
       if(this.state.numberOfitemsShown){
         itemsToShow =  for(let x = 0; x < 5; x++) {
        <li key={x}>{this.state.cars[x]['name']}</li>
       }
  }

return (
      <div>
        <ul>
         {itemsToShow}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}


render(<ShowSomeItems />, document.getElementById('root'));

• javascript
• reactjs
• for-loop
• ecmascript-6

Share Improve this question Follow asked May 21, 2018 at 1:34 brucebruce 46311 gold badge66 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A better approach in this case is to take advantage of ponent state to keep the current number of items you want to show and increment it with the button. It's cleaner and it goes well with the react way of defining UI. Example:

class ShowSomeItems extends React.Component {
  constructor() {
    super()
    this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
  }


  showMore = () => {
    if (this.state.numberOfitemsShown + 3 <= this.state.cars.length) {
      this.setState(state => ({ numberOfitemsShown: state.numberOfitemsShown + 3 }));
    } else {
      this.setState({ numberOfitemsShown: this.state.cars.length })
    }
  }

  render() {

    const itemsToShow = this.state.cars
      .slice(0, this.state.numberOfitemsShown)
      .map(car => <li key={car.name}>{car.name}</li>);

    return (
      <div>
        <ul>
          {itemsToShow.length ? itemsToShow : "Loading..."}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}

EDIT

You can make the render method cleaner extracting itemsToShow into a ponent like this:

const Items = props => {
  if (props.cars.length === 0) {
    return "Loading..."
  }
  return props.cars
    .slice(0, props.numberOfitemsShown)
    .map(car => <li key={car.name}>{car.name}</li>)
}

class ShowSomeItems extends React.Component {
//rest excluded for brevity

  render() {

    return (
      <div>
        <ul>
          <Items cars={this.state.cars} numberOfitemsShown={this.state.numberOfitemsShown} />
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}

Those who require the functional ponent version, can check this. I have changed the class based ponent which @SrThompson written into a functional

import { useMemo, useState } from "react";
import "./styles.css";

const carsList = [
  { name: "Audi", country: "Germany" },
  { name: "BMW", country: "Germany" },
  { name: "Chevrolet", country: "USA" },
  { name: "Citroen", country: "France" },
  { name: "Hyundai", country: "South Korea" },
  { name: "Mercedes-Benz", country: "Germany" },
  { name: "Renault", country: "France" },
  { name: "Seat", country: "Spain" },
  { name: "Dodge", country: "USA" },
  { name: "BMW", country: "Germany" },
  { name: "Tesla", country: "USA" },
  { name: "Volkswagen", country: "Germany" },
  { name: "Hyundai", country: "South Korea" },
  { name: "Jaguar", country: "United Kingdom" },
  { name: "GMC", country: "USA" },
  { name: "Bentley", country: "United Kingdom" }
];

export default function App() {
  const [cars] = useState(carsList);
  const [numberOfitemsShown, setNumberOfItemsToShown] = useState(5);

  const showMore = () => {
    if (numberOfitemsShown + 3 <= cars.length) {
      setNumberOfItemsToShown(numberOfitemsShown + 3);
    } else {
      setNumberOfItemsToShown(cars.length);
    }
  };

  const itemsToShow = useMemo(() => {
    return cars
      .slice(0, numberOfitemsShown)
      .map((car, index) => <li key={car.name + index}>{car.name}</li>);
  }, [cars, numberOfitemsShown]);

  return (
    <div>
      <ul>{itemsToShow.length ? itemsToShow : "Loading..."}</ul>
      <button onClick={showMore}>show more</button>
    </div>
  );
}

Working codesandbox