CODEWITHSUNDEEP
reactjsmaterial-ui
Dor Birendorf
Dor Birendorf

Reputation: 107

react render using map on Grid

I'm trying to build a page that shows the weather in all the locations mentioned in a list.

I want to render a card for each location and sort the cards next to each other so every row will contain 5 location cards [][][][][], currently, it renders only one under the other in a column: how can I solve this?

(weather.favoritesWeather is a list that contains all the data which needs).

const FavoriteWeatherCards = weather.favoritesWeather.map(
    (favoriteLocation) => (
      <div>
        <Row className="justify-content-md-center">
          <Col md={3} >
            <SmallConditionsCard data={favoriteLocation} />
          </Col>
        </Row>
      </div>
    )
  );



  return <div>
      {FavoriteWeatherCards}
      </div>;
};

code :

const SmallConditionsCard = ({data}) => {
  const { location, weather } = data;
  let history = useHistory();

  const handleClick = () => {
    history.push('/');
  };

  return (
    <div>
      <Card>
        <CardHeader
          sx={{ background: 'ghostwhite' }}
          title={
            <Typography align="center" variant="h5">
              {location.name}
            </Typography>
          }
        />
        <CardContent sx={{ textAlign: 'center' }}>
          <WeatherIcon
            number={weather[0].WeatherIcon}
            xs={12}
            sx={{ maxHeight: 200, maxWidth: 200 }}
          />
          <Typography variant="h6">{weather[0].WeatherText}</Typography>
          <Typography variant="p">
            {formatTemp(weather[0].Temperature.Metric.Value, celcius)}
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small" onClick={handleClick}>Learn More </Button>
        </CardActions>
      </Card>
    </div>
  );
};

this is the result now: enter image description here

Upvotes: 0

Views: 774

Answers (1)

Jorge Cordero
Jorge Cordero

Reputation: 190

If you are using react-bootstrap you need your container

const FavoriteWeatherCards = weather.favoritesWeather.map(
    (favoriteLocation) => (
        <Row className="justify-content-md-center">
          <Col>
            <SmallConditionsCard data={favoriteLocation} />
          </Col>
        </Row>
    )
  );



  return <Container>
      {FavoriteWeatherCards}
      </Container>;
};

In case that you want to render something using material UI grid could be something like this

const FavoriteWeatherCards = weather.favoritesWeather.map(
    (favoriteLocation) => (
      <Grid item xs={3}>
          <Item>
            <SmallConditionsCard data={favoriteLocation} />
          </item>
        </Row>
      </Grid>
    )
  );



  return <Grid container spacing={2}>
      {FavoriteWeatherCards}
      </grid>;
};

Upvotes: 1

Related Questions