Блог

У меня есть этот код, как я могу добавить тег на основе индекса? Я хочу создать сетку с 3 столбцами

 <div>

    {items.map((row, i) => (
        {i % 3 === 0 amp;amp; <div className={'grid-container'}>}
            <UniversityCard data={row} />
        {i % 3 === 2 amp;amp; </div>}

    ))}
</div>
  

этот код возвращает Parsing error: Unexpected token

Как я могу показать тег на основе index mod?

Обновить:

     {items.map((row, i) => (
        i % 3 === 0 ? <div className={'grid-container'}> : <>
            <UniversityCard data={row} />
        {i % 3 === 2 ? </div> : </>}
    ))}
</div>
  

Проблема в последнем {i%3===2} it return expression expected

Как я понял, вам нужно зациклить массив и создать структуру примерно так, как показано ниже,

 <div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
  

Вот как я бы это сделал. Вы не можете просто вернуть только закрывающий тег в JSX. Я добавил два дополнительных компонента, <Row/> и <Col/> просто для того, чтобы было понятно.

 /**Credit for chunk method - https://github.com/30-seconds/30-seconds-of-code */
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size   size)
  );

const data = ["A", "B", "C", "D", "E", "F"];

function UniversityCard(prop) {
  return <div>{prop.data}</div>;
}

function Row({ children }) {
  return <div className="my-row">{children}</div>;
}

function Col({ children }) {
  return <>{children}</>;
}

export default function App() {
  const chunked = chunk(data, 3);

  const renderColForRow = (data) => {
    return data.map((d) => {
      return (
        <Col>
          <UniversityCard data={d} />
        </Col>
      );
    });
  };

  return (
    <>
      {chunked.map((ch) => {
        return <Row>{renderColForRow(ch)}</Row>;
      })}
    </>
  );
}
  

Да, у вас есть два цикла, и это может быть не лучшим решением для цикла большого массива.

Или простой способ, возможно, использовать сеточную систему bootstrap. Если вы используете bootstrap, в JavaScript вам нужно сделать только,

 data.map((row, i) => {
  return <div className="col-md-4"></div>
})