How to map objects in state to a dynamic list in reactJS

Question

As of my current knowledge now, I know that you can map an array from state to HTML elements and can make an array of elements that can repeat itself over and over again. However, is that any way for me to do the same but to map out items into a list so I can dynamically populate my dictionary?

So what I want is to have this:

this.setState({         
    series: [
    {
        name: 'Bob',
        data: [
        {
            x: 'Block 396 HDB Tampines',
            y: [
            new Date('2019-03-05').getTime(),
            new Date('2019-03-08').getTime()
            ]
        },
        {
            x: 'Eastpoint Mall',
            y: [
            new Date('2019-03-02').getTime(),
            new Date('2019-03-05').getTime()
            ]
        },
        {
            x: 'Bata',
            y: [
            new Date('2019-03-05').getTime(),
            new Date('2019-03-07').getTime()
            ]
        },
        {
            x: 'Barracuda Tech',
            y: [
            new Date('2019-03-03').getTime(),
            new Date('2019-03-09').getTime()
            ]
        },
        {
            x: 'Aromas of India',
            y: [
            new Date('2019-03-08').getTime(),
            new Date('2019-03-11').getTime()
            ]
        },
        {
            x: '517 Food court',
            y: [
            new Date('2019-03-11').getTime(),
            new Date('2019-03-16').getTime()
            ]
        },
        ]
    },
    {
        name: 'Joe',
        data: [
        {
            x: 'Aljunied Industrial Estate',
            y: [
            new Date('2019-03-02').getTime(),
            new Date('2019-03-05').getTime()
            ]
        },
        {
            x: 'Bata',
            y: [
            new Date('2019-03-06').getTime(),
            new Date('2019-03-16').getTime()
            ]
        },
        {
            x: 'YinJi Singapore',
            y: [
            new Date('2019-03-03').getTime(),
            new Date('2019-03-07').getTime()
            ]
        },
        {
            x: 'Aromas of India',
            y: [
            new Date('2019-03-20').getTime(),
            new Date('2019-03-22').getTime()
            ]
        },
        {
            x: 'Djitsun Mall',
            y: [
            new Date('2019-03-10').getTime(),
            new Date('2019-03-16').getTime()
            ]
        }
        ]
    },
    ],
})

Above is what I want to have as my final outcome

Below is the code that I have been trying but it seems impossible

this.setState({
            series: [
                ...this.state.suspectCases.map(suspect => {
                    return{
                        name: suspect.firstName + " " + suspect.lastName,
                        data:[
                            {
                                x: 'Block 396 HDB Tampines',
                                y: [
                                new Date('2019-03-05').getTime(),
                                new Date('2019-03-08').getTime()
                                ]
                            },
                            {
                                x: 'Eastpoint Mall',
                                y: [
                                new Date('2019-03-02').getTime(),
                                new Date('2019-03-05').getTime()
                                ]
                            },
                            {
                                x: 'Bata',
                                y: [
                                new Date('2019-03-05').getTime(),
                                new Date('2019-03-07').getTime()
                                ]
                            },
                            {
                                x: 'Barracuda Tech',
                                y: [
                                new Date('2019-03-03').getTime(),
                                new Date('2019-03-09').getTime()
                                ]
                            },
                            {
                                x: 'Aromas of India',
                                y: [
                                new Date('2019-03-08').getTime(),
                                new Date('2019-03-11').getTime()
                                ]
                            },
                            {
                                x: '517 Food court',
                                y: [
                                new Date('2019-03-11').getTime(),
                                new Date('2019-03-16').getTime()
                                ]
                            },
                        ]
                    }
                    
                })            
            ]
        })

Are there any ways to do this? Or is this impossible and requires other backends to do it? P.S.: I have not done anything for the data as I was still trying to see if the name works first

BloodyMonkey · Accepted Answer · 2020-08-04 15:29:29Z

1

Try to populate an array before set the state like

let series = []
this.state.suspectCases.foreach(suspect => {
    series.push(
        {
            name: suspect.firstName + " " + suspect.lastName,
            data:[
                {
                    x: 'Block 396 HDB Tampines',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                    ]
                },
                {
                    x: 'Eastpoint Mall',
                    y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Bata',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Barracuda Tech',
                    y: [
                    new Date('2019-03-03').getTime(),
                    new Date('2019-03-09').getTime()
                    ]
                },
                {
                    x: 'Aromas of India',
                    y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-11').getTime()
                    ]
                },
                {
                    x: '517 Food court',
                    y: [
                    new Date('2019-03-11').getTime(),
                    new Date('2019-03-16').getTime()
                    ]
                },
            ]
        }
    )
}) 

this.setState({series})

OR

let series = this.state.suspectCases.map(suspect => {
    return(
        {
            name: suspect.firstName + " " + suspect.lastName,
            data:[
                {
                    x: 'Block 396 HDB Tampines',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                    ]
                },
                {
                    x: 'Eastpoint Mall',
                    y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                    ]
                },
                {
                    x: 'Bata',
                    y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-07').getTime()
                    ]
                },
                {
                    x: 'Barracuda Tech',
                    y: [
                    new Date('2019-03-03').getTime(),
                    new Date('2019-03-09').getTime()
                    ]
                },
                {
                    x: 'Aromas of India',
                    y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-11').getTime()
                    ]
                },
                {
                    x: '517 Food court',
                    y: [
                    new Date('2019-03-11').getTime(),
                    new Date('2019-03-16').getTime()
                    ]
                },
            ]
        }
    )
}) 

this.setState({series})

edited Aug 4, 2020 at 15:29

answered Aug 4, 2020 at 15:18

BloodyMonkey

1,6731 gold badge11 silver badges16 bronze badges

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

5 Comments

n9iels Over a year ago

You are now using the map function as a forEach. Instead of series.push just return the object.

BloodyMonkey Over a year ago

My bad, i wanted to use a foreach

n9iels Over a year ago

Still, you are using a forEeach for a operation that more suitable to a map

BloodyMonkey Over a year ago

Same... I added it anyway

BloodyMonkey Over a year ago

Where are you setting your state ? If you do it in componentDidUpdate or componentWillUpdate , each render make a new render and you are in an infinite loop. Place it in componentDidMount or in a method.

Collectives™ on Stack Overflow

How to map objects in state to a dynamic list in reactJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related