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

MarcL · Accepted Answer · 2019-06-26 07:31:19Z

-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, 2019 at 7:31

MarcL

3,6138 gold badges61 silver badges108 bronze badges

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

6 Comments

jonrsharpe Over a year ago

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.

MarcL Over a year ago

I would recommend just looking at this whole post, because it represents a working solution to my problem ;)

jonrsharpe Over a year ago

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.

MarcL Over a year ago

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

jonrsharpe Over a year ago

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.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related