how to render multiple instances based on array data React

Question

I have an array with objects including different coordinates such as:

bottomRow: 130.8201356
leftCol: 52.33386899
rightCol: 279.71340993
topRow: 48.9834268

what I need is to render squares based on this data. As many squares as there is different objects in the array.

I have tried this code with no success:

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {   box.forEach(() => {
                    return (
                        <div className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}>
                        </div>
                    )
            }
                
                )
            }
        </div>
    </div>
  );

}

how should I solve this so it takes all the objects and renders all the squares? So far I had to put [0] or any other array index next to box and it renders only that one object. but I need rendering all at once.

update:

I have tried box.map like this:

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                { box.map(((topRow, rightCol, leftCol, bottomRow), idx) => {
                        <div key={idx} className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}>
                        </div>
                        }
                    )
                }
        </div>
    </div>
  );
}

still no success, I get Invalid parenthesized assignment pattern now but can not figure out why

Does this answer your question? Mapping through an array of dictionary and then passing values as props in the component — Germa Vinsmoke
– Germa Vinsmoke, Commented Feb 18, 2021 at 11:25
Why are you using box.forEach() instead of box.map()? Array.forEach will always return undefined, so its use case is more limited than map. — Håken Lid
– Håken Lid, Commented Feb 18, 2021 at 11:42

Mvrocha · Accepted Answer · 2021-02-18 11:55:24Z

2

First, you should be using map, since forEach will return undefined. Second, you forgot to use the control variable inside map/forEach, you map sould be done like so:

const FaceRecognition = ({imageUrl, box}) => {
     console.log('recog',box)
  return (
    <div className='item-e center ma'>
        <div className='absolute mt2 z-2'>
            <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {   box.map((element) => {
                    return (
                        <div className='bounding-box' style={{top: element.topRow, right: element.rightCol, bottom: element.bottomRow, left: element.leftCol}}>
                        </div>
                    )
            }
                
                )
            }
        </div>
    </div>
  );

}

The box you are using there is the full array, so it´s impossible to get this elements.

answered Feb 18, 2021 at 11:55

Mvrocha

4033 silver badges16 bronze badges

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

1 Comment

Muhammad Taseen Over a year ago

the same code that is shared before but well-explained :), upvoted for you

Muhammad Taseen · Accepted Answer · 2021-02-18 11:53:59Z

1

You should try the map function and add an arg in the map function.

const FaceRecognition = ({ imageUrl, box }) => {
  return (
    <div className='item-e center ma'>
      <div className='absolute mt2 z-2'>
        <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt='' />
        {box.map((item) => {
          return (
            <div className='bounding-box' style={{ top: item.topRow, right: item.rightCol, bottom: item.bottomRow, left: item.leftCol }}>
            </div>
          )
        })
        }
      </div>
    </div>
  );
}

answered Feb 18, 2021 at 11:53

Muhammad Taseen

5791 gold badge7 silver badges22 bronze badges

Comments

Garud Pragati · Accepted Answer · 2021-02-18 12:16:52Z

0

const FaceRecognition = ({imageUrl, box}) => {
    console.log('recog',box)
    return (
        <div className='item-e center ma'>
            <div className='absolute mt2 z-2'>
                <img className='image br4 ma4 z-2' id='inputImage' src={imageUrl} alt=''/>
                {box.map(({topRow, rightCol, leftCol, bottomRow}, idx) => (
                    <div
                       key={idx}
                       className='bounding-box'
                       style={{
                           top: topRow, 
                           right: rightCol, 
                           bottom: bottomRow, 
                           left: leftCol
                       }}>
                    </div>
                ))}
            </div>
        </div>
   );
}

edited Feb 18, 2021 at 12:16

answered Feb 18, 2021 at 12:09

Garud Pragati

2131 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to render multiple instances based on array data React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related