array.map() не отображает элементы горизонтально в контейнере сетки в React

Я использую React и Material-UI. Моя цель - отобразить контейнер сетки, начиная с внешнего файла javascript, который экспортирует свой собственный массив. Эта сетка должна иметь 3 элемента в строке, но на данный момент она просто отображает элементы в одном столбце. Вот код:

import React from "react";
import CoffeeCard from "./CoffeeCard";
import { Grid } from "@material-ui/core";
import files from "./constants";

function Content() {
  return (
    <Grid direction="rows" container spacing={2}>
      <Grid item xs={12} sm={4}>
        {files.map((obj) => {
          return (
            <CoffeeCard
              title={obj.title}
              price={obj.price}
              description={obj.description}
              avatarUrl={obj.avatarUrl}
              imgSrc={obj.imgSrc}
            />
          );
        })}
      </Grid>
    </Grid>
  );
}

export default Content;

reactjs javascript html material-ui
person Ale Mari    schedule 05.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно переместить вложенный компонент Grid для отдельных элементов внутри функции карты. Прямо сейчас ваш код отображает только 1 компонент элемента Grid с дочерними элементами, вам нужно отображать по одному для каждой строки:

 <Grid direction="rows" container spacing={2}>
    {files.map((obj) => {
      return (
        <Grid item xs={12} sm={4}>
          <CoffeeCard
            title={obj.title}
            price={obj.price}
            description={obj.description}
            avatarUrl={obj.avatarUrl}
            imgSrc={obj.imgSrc}
          />
        </Grid>
      );
    })}
  </Grid>
</Grid>
person Nick    schedule 05.03.2021

arrow_upward
1
arrow_downward

Проблема в том, как вы используете компонент <Grid /> из Material UI. Дополнительную информацию см. в документации на Grid.

В частности, вы хотите, чтобы ваш item обертывал каждый отдельный элемент. Как у вас есть, у вас есть один элемент, который обертывает ваш контент.

Так что просто переместите <Grid item> в возвращаемое значение .map:

import React from 'react';
import CoffeeCard from './CoffeeCard';
import { Grid } from '@material-ui/core';
import files from './constants';

function Content() {
  return (
    <Grid direction="rows" container spacing={2}>
      {files.map((obj) => {
        return (
          <Grid item xs={12} sm={4}>
            <CoffeeCard
              title={obj.title}
              price={obj.price}
              description={obj.description}
              avatarUrl={obj.avatarUrl}
              imgSrc={obj.imgSrc}
            />
          </Grid>
        );
      })}
    </Grid>
  );
}

export default Content;
person romellem    schedule 05.03.2021