Как добавить Показать больше / показать меньше в зависимости от количества строк

Question

Я работаю над приложением, и мне нужно реализовать функцию show more / less. Я наткнулся на следующий код:

  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" },
    ],
      itemsToShow: 3,
      expanded: false
    }

    this.showMore = this.showMore.bind(this);
  }
  
  showMore() {
    this.state.itemsToShow === 3 ? (
      this.setState({ itemsToShow: this.state.cars.length, expanded: true })
    ) : (
      this.setState({ itemsToShow: 3, expanded: false })
    )
  }
  
  render() {
    return <div>
      <h3>Click show more to see more data</h3>
      <div className="row">
        <h3>List of Cars</h3>
        <div className="container">
          {this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => 
           <div className="box" key={i}>{car.name} - {car.country}</div>
          )}
        </div>
      </div>
      <p>
        <button style={{width: '100%'}}onClick={this.showMore}>
          {this.state.expanded ? (
             <span>Show less</span>
           ) : (
             <span>Show more</span>
           )
          }
        </button>.
      </p>
    </div>;
  }
}

https://jsfiddle.net/vkpati20/3a18og9t/23

Прямо сейчас я показываю больше и показываю меньше функциональности в зависимости от количества div (в настоящее время показывает 3 изначально). Но когда мы увеличиваем размер экрана дисплея, он показывает только 3 блока, а после них остается много белого пространства. Кроме того, когда мы уменьшаем размер экрана дисплея (чтобы отображать только 2 в строке), мы видим, что снова есть пустое пространство, которое может быть занято.

Таким образом, вместо того, чтобы показывать больше и показывать меньше, зависит от # отображаемых блоков, как сделать так, чтобы отображалось больше и меньше отображалось в зависимости от количества отображаемых строк?

Пример: я хочу, чтобы окна всегда занимали 1-ю строку на всех размерах экрана и скрывали остальные поля.

Answer 1

Поскольку поле имеет фиксированный размер 100px и поля слева и справа от 10px, вы можете вычислить innerWidth окна и разделить его на 120 пикселей для каждого поля.

Однако помните, что классы container и row имеют дополнительное пространство, которое необходимо вычесть. Я вычел лишний пробел 80px перед делением, чтобы дать вам пример.

Отметьте эту скрипку

https://jsfiddle.net/0ad2zqe7/7/

Обновленный ответ :

Новая скрипка, которая имеет прослушиватель изменения размера окна и обновляет состояние с текущим innerWidth, чтобы отображать или скрывать кнопки динамически.

https://jsfiddle.net/xLa9sedo/

Answer 2

Я рекомендую вам использовать простой легкий плагин с некоторыми дополнительными опциями.

например, вы можете использовать readmore. js

https://jedfoster.com/Readmore.js/