score:3

Accepted answer
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>
    );
  }
}

score:1

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>
  );
}

Related Query

More Query from same tag