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...

Answer 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.