How to dynamically create a new row?

Question

I'm using react-bootstrap and I'm wondering if it's possible to dynamically go to the next row based on code. Let me show you what I'm trying to do :

// components/WeatherList.js

import React from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'

const WeatherList = ({weathers}) => {
    console.log("e")
    console.log(weathers)
    return (
        <Row>
           {weathers.list.map(({dt, main, weather}) => (
                <Col key={dt}>
                    <WeatherCard
                    dt={dt * 1000} 
                    temp_min={main.temp_min} 
                    temp_max={main.temp_max} 
                    humidity={main.humidity}
                    temp={main.temp}
                    main={weather[0].main} 
                    city={weathers.city.name}
                    country={weathers.city.country}
                  />
                </Col>
            ))} 
        </Row>
    )
}

export default WeatherList;

I get up to 5 prediction per day (so 5 cards), but if I only get 2 prediction I want to go to a new line for the next day. On the picture you can see, I'd like to dynamically create a new row when the day change :

How can I do that ?

Well, I would group cards per day & then render each day as new row with the grouped cards in it — The Reason
– The Reason, Commented Aug 19, 2021 at 14:14
@TheReason if you have any sample in order to help I'd appreciate, I'm currently working around your idea — J.erome
– J.erome, Commented Aug 19, 2021 at 14:21

Tumo Masire · Accepted Answer · 2021-08-19 15:06:30Z

I would try something like this to filter out the weather objects into groups of days:

import React, { useEffect, useState } from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'

const WeatherList = ({weathers}) => {
    console.log("e")
    console.log(weathers)
    
    const [weathersDays, setWeathersDays] = useState([]); // An array of weather objects for a day

    useEffect(()=>{
        let previousDay = null;
        tempDays = []
        returnDays = []
        // Loop through weathers to split by day
        weathers.list.map(({dt, main, weather}) => {
                const currentDate = new Date()
                currentDate.setTime(dt*1000);
                const currentDay = currentDate.getDay() // An integer representing the day
                if (previousDay == null) {
                    // The first day (Edge Case), just push to the current day
                    previousDay = currentDay;
                    tempDays.push({dt, main, weather})
                }
                else if (previousDay == currentDay) {
                    // Same day, so push to list for current day
                    tempDays.push({dt, main, weather})
                }
                else {
                    // This is a new day, push list of old days and start a new tempDays list
                    returnDays.push(tempDays);
                    previousDay = currentDay;
                    tempDays = [];
                    tempDays.push({dt, main, weather});
                }
            })
        // Catch the last group of days if not empty
        if (tempDays.length > 0){
            returnDays.push(tempDays);
        }
        setWeathersDays(returnDays);
    },[weathers])

    return (
        <>
            {weathersDays.map(weatherDay => {
            <Row>
                {weatherDay.map(({dt, main, weather}) => (
                    <Col key={dt}>
                        <WeatherCard
                        dt={dt * 1000} 
                        temp_min={main.temp_min} 
                        temp_max={main.temp_max} 
                        humidity={main.humidity}
                        temp={main.temp}
                        main={weather[0].main} 
                        city={weathers.city.name}
                        country={weathers.city.country}
                    />
                    </Col>
                ))} 
            </Row>
            })
            } 
        </>
    )
}

export default WeatherList;

The Reason · Accepted Answer · 2021-08-19 14:34:36Z

1

Try to group the data by day, where each day will have an array of cards to show then in a react code you will have two loops:

For days
For cards

I.e. of structure

{
  '2020-10-10': [card1, card2....],
  '2020-10-11': [card1, card2....],
  ...
}

React code will look like

Object.keys(days).map((key) => (
  <Row>
    {days[key].map((card) => <Card {...card} />)}
  </Row>
))

You can do the same with the nested arrays it might be easier

edited Aug 19, 2021 at 14:34

answered Aug 19, 2021 at 14:27

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to dynamically create a new row?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related