Rendering nested components ReactJS

Question

I have my data in this format:

const INITIAL_STATE = {
expenses: {
    byId: {
        k948zpnp: {
            id: 'k948zpnp',
            category: 'other',
            description: 'book',
            amount: '25',
            timeSpent: '2.5',
            time: '2020-04-21'
        }
    },
    allIds: ['k948zpnp']
  }
}

What I want to do is render Component that contains date - so all my child components (SingleItem) that have the same time are grouped in it.

<ExpensesByDay date={time)>
   <SingleItem restOfData={...} />
</ExpensesByDay>

I'm grouping my data by the time property and the final object:

   budgetByDay = {
    2020-04-11: (4) [{…}, {…}, {…}, {…}],
    2020-04-20: [{…}],
    2020-04-21: (2) [{…}, {…}]
    }

Then I make and an array of all the dates and do this:

{datesArray.map(date =>
                budgetByday[date].map(item => (
                    <DailyBudget date={date}>
                        <SingleItem
                            keyAndRest={...}
                        />
                    </DailyBudget>
                ))
            )}

But this won't work. I'm thinking that my approach might be incorrect from the beginning and I might not need my expenses grouped by date. How would you approach this task?

What is the exact problem? Are you getting an error or your component is not being rendered as you expect? — oozywaters
– oozywaters, Commented May 4, 2020 at 10:30
I get no errors, but only the dates are being rendered without expenses inside. Also dates are being repeated instead of Date1: value1, value2. Date2: ... — Stepas
– Stepas, Commented May 4, 2020 at 10:38
Here is the link to example [codesandbox.io/s/mystifying-khayyam-6tdcp?file=/src/App.js] — Stepas
– Stepas, Commented May 4, 2020 at 11:28
It is worth putting your App, DailyBudget and SingeItem components implementation in your initial question, as these details are important to understand your problem. — oozywaters
– oozywaters, Commented May 4, 2020 at 12:43
@Stepas : I got adjusted my answer to the rest of your environment, you may inquiry that for details along with the link to working codesandbox — Yevhen Horbunkov
– Yevhen Horbunkov, Commented May 4, 2020 at 13:15

oozywaters · Accepted Answer · 2020-05-04 12:33:18Z

1

In your code SingleItem is nested inside DailyBudget. That is not correct because in your DailyBudget implementation it doesn't render any children components. Moreover, you can't place <tr> inside another <tr> element. So here is corrected code that should work as you expect:

    {datesArray.map((date) =>
      <>
        <DailyBudget date={date} key={date} />
        {budgetByday[date].map((dateItem) => <SingleItem {...dateItem} /> )}
      </>
    )}

edited May 4, 2020 at 12:33

answered May 4, 2020 at 12:26

oozywaters

1,2511 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yevhen Horbunkov · Accepted Answer · 2020-05-04 13:14:31Z

0

Your budgetByday is an object, so you can't use Array.prototype.map() method directly. Instead, you may extract its entries and map those:

<tbody>
        {Object.entries(budgetByday).map(([date, items], key) => [
          <DailyBudget date={date} key={key} />,
          ...items.map(({ id, ...rest }) => <SingleItem key={id} {...rest} />)
        ])}
</tbody>

You may check out the updated version of your sandbox over here.

edited May 4, 2020 at 13:14

answered May 4, 2020 at 10:08

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

2 Comments

Stepas Over a year ago

And the last question, is this normal practice to render multiple components this way?

Yevhen Horbunkov Over a year ago

@Stepas : for multiple different components, which you cannot combine inside common parent node (e.g. dummy-tag <>) to keep the rest of mark up consistent, yes, it is legitimate way to do that.

Collectives™ on Stack Overflow

Rendering nested components ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related