0

I am trying to render a div that is supposed to display a purple square, through mapping an array of objects (box).
the square does not render, but console logging does work for some reason.

const FaceRecognition = ({ imgURL, box }) => {
  const Square = (box) => {
    box.map( (square,i ) => {
      return (
        <div key={i}
         className='bounding-box'
         style={{ top: square.topRow, right: square.rightCol, bottom: square.bottomRow, left: square.leftCol }}>
         {console.log("square calculated")}
        </div> 
      )
    })
  }
  return (
    <div className='center ma'>
      <div className="absolute mt2" >
        <img id='inputimage' src={imgURL} width='500px' height='auto' alt="" />
        {Square(box)}
        {/* <div className='bounding-box' style={{ top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol }}></div> */}
      </div>
    </div>
  )

}

enter image description here
i have attached an image of the code here if its any better than the body text

the square div was displaying normally when i tried rendering it through the parent function return, without mapping - where commented line is in the attached image.
i would love to see what im doing wrong here.

Almog Hasson
  • 1
  • 1
    You're not returning anything from `Square` – 0stone0 Jul 11 '23 at 14:54
  • 1
    Change `box.map` to `return box.map` – 0stone0 Jul 11 '23 at 14:54
  • 1
    Just remove the braces `{}` around the body of `Square`. – Unmitigated Jul 11 '23 at 14:54
  • @0stone0 ohhh i did not know i need to return the whole thing, it works ty!, cant understand why i need to return the box.map tho if i already have a return inside map, mind explaining? – Almog Hasson Jul 11 '23 at 15:12
  • The return inside the map returns from the inside, but `box.map` gets a value returned, that's lost right now. If you add a `return` before `box.map`, you return the result of map from the Square function to the caller. – 0stone0 Jul 11 '23 at 15:17

0 Answers0