React functional components: return an array list inside an array of nested objects

Question

I have an array of objects that have themselves an array inside and I would like to create a list with first some top-level object property and then map over the array elements of each object and display them in JSX on the list... I am doing this inside a React functional component, so there is not render() function, just a return (...), I was already looking at here: React JSX: rendering nested arrays of objects and here: REACT: Map over nested array of objects but somehow that did not work.

here is my code:

import React from 'react';
import Anzeige from '../pages/gebuchte-stellenanzeigen';

const anzeigenArray = (props) => {
    let style;
    if (props.aussehen != null) {
        style = props.aussehen;
    }else {
        style = {};
    }

    let docs = props.anzeigenArray;

    const filterByDay = (entr, idx) => {
        const dayInMilliseconds = 24*60*60*1000;
        let now = new Date().getTime();
        let previous = idx;
        let next = idx+1;

        let datenow =  now - (previous*dayInMilliseconds);
        let datethen = now - (next*dayInMilliseconds);

        let arr = entr.filter((anzeige) => {
            let anzeigeDate = new Date(anzeige.createdtimestamp).getTime();
            return ( anzeigeDate > datethen && anzeigeDate <  datenow )
        });
        return arr;
    }

    let filteredArray = [];

    for (let i = 0; i<7; i++) {
        let result = filterByDay(docs,i);
        let doc = {
            'day': i,
            'docs': [...result]
        }
        filteredArray.push(doc);       
    }


    return (filteredArray.map((test,testindex) =>  {
            <p><h2>Tag: {test.day}</h2></p>
            return test.docs.map((anzeige,index) => (                                    
            <li className="mainList" key={anzeige.id} style={style} >
                <Anzeige 
                finished = {props.finished}
                anzeige={anzeige} 
                key={anzeige.id + index}
                index={index}  
                onClickalert={() => props.onClickAlert()}
                onButtonfinish={props.onButtonFinish}
                unDone = {props.onUndone}
                />
            </li> 
        ));                            
    })); 
}

export default anzeigenArray;

I somehow can't manage to iterate over two arrays...

score -1 · Answer 1 · answered Jun 26 '19 at 07:31

-1

EDIT: I finally got it to work like this:

   return (
    <div>
    {
        filteredArray.map((test,testindex) =>  {
                return (
                <div>
                    <p><h2>Tag: {test.day}</h2></p>
                    { 
                        test.docs.map((anzeige,index) => (                                    
                        <li className="mainList" key={anzeige.id} style={style} >
                            <Anzeige 
                            finished = {props.finished}
                            anzeige={anzeige} 
                            key={anzeige.id + index}
                            index={index}  
                            onClickalert={() => props.onClickAlert()}
                            onButtonfinish={props.onButtonFinish}
                            unDone = {props.onUndone}
                            />
                        </li> 
                        ))
                    } 
                </div>
                )                          
        })
    }
    </div> 
  )

I'm just still not completely sure why it has to be that complicated, I dont see the logic or the missing bits to make it work just like this.

answered Jun 26 '19 at 07:31

MMMM

3,320
8
43
80

If you don't really understand what you've changed or how it helps, this probably isn't going to be useful to anyone else with a similar problem (not least because your question doesn't include the specifics of what went wrong for them to search for - a syntax error?) I'd recommend just deleting this whole post. – jonrsharpe Jun 26 '19 at 10:56
I would recommend just looking at this whole post, because it represents a working solution to my problem ;) – MMMM Jun 26 '19 at 12:11
But the point of a Q&A here is to help *other people* solve the same problem - as it stands there's no way for them to 1. find this or 2. understand what changed and why. – jonrsharpe Jun 26 '19 at 12:13
some people understand the problem and the solution when they see a working example, and some people don't... I think it's better to have a solution than not to have one? Btw I understood the syntax now, I was just missing a top-level div and the Javascript expression has to be rendered between `{...}` and inside each `.map` function, you have to return the JSX Expression for each array element, and you have to put it between curly braces, because the expression itself is a javascript function, and this way, you can cascade (nest) it inside eachother – MMMM Jun 26 '19 at 12:20
That's true, but it's better to include the what and why for those who *don't* want to diff it in their heads and puzzle it out. And it doesn't change the fact that someone sitting looking at the same error you had won't be able to find this question, because *it's not included*. Hence, unless you're willing to substantially improve both Q&A, I'm suggesting deletion. – jonrsharpe Jun 26 '19 at 12:37
it seems I can't delete my post anymore :( – MMMM Oct 27 '22 at 20:34

React functional components: return an array list inside an array of nested objects

1 Answers1