Как вывести 2 элемента массива, а по клику на кнопку выводить оставшиеся элементы по одному?

Question

[deantek]

есть массив items = [1,2,3,4]
как мне вывести первые 2 элемента, а после нажатия кнопки вывести еще 1 элемент и тд
сейчас я сделал так

counter() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }))
  }

 render() {
    const { items } = this.state


    return (
      <>
        {items.map((item: any, i: number) => {
          if (i < this.state.count * 2) {
            return <div className={s.container}>{item}</div>
          }
          return <></>
        })}
        <button type="button" onClick={() => this.counter()}>
          counter
        </button>
      </>
    )
  }

но сейчас я вывожу только первые 2 элемента, а после нажатия на кнопку все остальные сразу

Answer 1

[alexzlow]

(i < this.state.count * 2)

return (
    <>
      {
        arr.map((value, index) => {
        if (index < 2) {
          return <div key={index}>{value}</div>
        }
      })}
    </>

Вместо двойки нужно написать state. У вас он должен начинаться с 2

Comments

[deantek]

спасибо, что-то не подумал об этом

[WbICHA]

deantek, тогда уж лучше так:

arr.slice(0, 2).map((value, index) => <div key={index}>{value}</div>)