Draw multiple rectangle in single image in reactjs - reactjs

Question

I'm trying to draw rectangles on image using x,y,height and width but i can only able to draw one rectangle at a time can't able to draw multiple rectangle in single image.
JSX code:
{this.state.books.map((object) => (
<div class="img-overlay-wrap"style={{ marginLeft: "27%" }}>
<img src={`data:image/png;base64,${object.image_id}`} style={{ height:`${object.hw[0]}` , width:`${object.hw[1]}`}} alt="" />
<svg width={object.hw[1]} height={object.hw[0]} >
<g >
<rect x={object.bbox[0]} y={object.bbox[1] - object.bbox[3]} width={object.bbox[2]} height={object.bbox[3] }
style={{stroke:"red",}} fill-opacity="0.0" />
<text x={object.bbox[0]} y={object.bbox[1]} font-family="Verdana" font-size="35" fill="red">{object.category_id}</text>
</g>
Sorry, your browser does not support inline SVG.
</svg>
<h3>Confidence:{object.score}</h3>
<h3>Category Id:{object.category_id}</h3>
<p>{object.bbox[0]},{object.bbox[1]},{object.bbox[3]},{object.bbox[2]}</p>
</div>
))}
i am using map function to iterate through the array but i couldn't able to draw all the rectangles in single image please help me

Answer 1

I've done This, and it worked for me, maybe it is useful for you:
const rectInfos = [
[{top:"0px",left:"0px",color:"green"},{top:"0px",left:"500px",color:"yellow"}],
[{top:"150px",left:"0px",color:"blue"},{top:"150px",left:"500px",color:"black"}],
]
const rects = rectInfos.map((row,i)=>
row.map((svgElement,j)=>
<svg key={`i+${i}+${j}+j`} style={{width:"500px", height:"150px",position: "absolute", top:svgElement.top, left:svgElement.left}}>
<rect style={{fill:svgElement.color, width:"500px", height:"150px"}} />
</svg>
)
)
return (
<div style={{position: "relative", width:"1000px", height:"300px"}}>
{rects}
</div>
)
}
This case is for 4 rectangles with the same width and height in a parent div.