CODEWITHSUNDEEP
javascriptreactjs
ezzeddin
ezzeddin

Reputation: 521

How to loop over array of objects in JSX?

I'm new to React and I'm using JSX with it and I need a way to loop over the array of objects that I have. I used map method, but it gives me this error in the console: TypeError: boxes.map is not a function where boxes is the array containing objects.

Here is my FaceRecognitionList component code:

import React from 'react';
import FaceRecognition from './FaceRecognition';

const FaceRecognitionList = ({ imageUrl, boxes }) => {
    console.log(boxes)
    return (
        <div>
            {
                boxes.map((box, i) => {
                    return (
                    <FaceRecognition
                    key={i}
                    left={boxes[i].leftCol} 
                    top={boxes[i].topRow} 
                    right={boxes[i].rightCol}
                    bottom={boxes[i].bottomRow}
                    imageUrl={imageUrl}
                    />
                );
            })
        }
        </div>
    );
}
export default FaceRecognitionList;

Upvotes: 1

Views: 82

Answers (1)

Jonas Tomanga
Jonas Tomanga

Reputation: 1108

Try

Object.entries(boxes).map(([key, vaue]) => console.log(key, value))

Otherwise, try

Object.keys(boxes).map(key => boxes[key])

Upvotes: 2

Related Questions