如何在 gatsbyJs (React) 中制作一个显示卡片内下一个数组项的按钮

Question

我正在做这样的标准映射；我使用 slice(0,1) 只获取第一个数组项；没有切片将在其自己的卡片中显示所有 10 个类别

<div ClassName="card-div">
  {carsTypes.map((carsType, i) => (
     <div key={i}>
         <div className="car-type-title">   
            <h6>{CarsType.title}</h6>

            // The following makes a pagination number. i.e.: 1/10
            <p>{carsTypes.indexOf(carsType) + 1} / {carsTypes.length}</p>
            <button type="button">Next Car Type </button>
         </div>

          // This section map all the category names inside the card
         {strapi[carsType.id].map((cars, i) => {
            const brand = cars.brand
            return (
              <p className="cars-card-type" key={i}>
                <Link
                  to={carsType.getPath(brand)}
                  className="btn-nav rounded-3"
                >
                  {brand}
                </Link>
              </p>   
            )
          })}
        </div>
      ))}

如何创建一个按钮或 div 当用户点击它时；将通过下一个卡类型（或类别）从 1/10 到 2/10？

Answer 1

已修复！无需映射所有数组。

  const [showCars, setCars ]  = useState(0)

    <div">
      {carsType.map((carsType, i) => {
        if (i === showCategory) {
          return (
          <div key={i}>
           <div>
            <h6>{carsType.title}</h6>
            <p>{carsTypes.indexOf(carsType) + 1} / {carsTypes.length}</p>
          </div>
          {strapi[carsType.id].map((category, i) => {
            const brand = category.brand
            return (
              <p key={i}>
                <Link to={carsType.getPath(brand)}>
                  {name}
                </Link>
              </p>   
              )
            })}
            <div>
              <button
                type="button"
                className="btn"
                onClick={() => setcars(showCars + 1)}
              >
               Next
              </button>
            </div>
          </div>          
          )}
      })}
      </div>
    </div>
  )
}

如何在 gatsbyJs (React) 中制作一个显示卡片内下一个数组项的按钮

How to make a button that show the next array item inside a card in gatsbyJs (React)

javascript

arrays

mapping

reactjs

use-state