How to draw multiple Rectangle inside SVG

Question

I am using react with typescript. In my project, I am trying to draw multiple rectangles on my SVG. The first rectangle is easily drawn but when I am trying to draw another rectangle the previous one will disappear and then the new one is drawn. How do I maintain the previously drawn rectangle in a state and then render them?

complete sandbox link here is my code:

const svgRef = useRef<SVGSVGElement>(null);
    const divRef = useRef<HTMLDivElement>(null);
    const { xCord, yCord } = useMousePosition({ divRef });
    const [mousedown, setMouseDown] = useState(false);
    const [last_mousex, set_last_mousex] = useState(0);
    const [last_mousey, set_last_mousey] = useState(0);
    const [mousex, set_mousex] = useState(0);
    const [mousey, set_mousey] = useState(0);
    const [rectx, setrectx] = useState(0);
    const [recty, setrecty] = useState(0);
    const [rectwidth, setrectwidth] = useState(0);
    const [rectheight, setrectheight] = useState(0);

    const mouseDown = () => {
        set_last_mousex(xCord);
        set_last_mousey(yCord);
        setMouseDown(true);
      };
    
      const mouseUp = () => {
        setMouseDown(false);
      };
    
      const mouseMove = () => {
        set_mousex(xCord);
        set_mousey(yCord);
      };
    
      const addRectangle = () => {
        if (mousedown) {
          const width = Math.abs(mousex - last_mousex);
          const height = Math.abs(mousey - last_mousey);
    
          const rx = mousex < last_mousex ? mousex : last_mousex;
          const ry = mousey < last_mousey ? mousey : last_mousey;
          rectx!==rx && setrectx(rx);
          recty!==ry && setrecty(ry);
          rectheight!==height && setrectheight(height);
          rectwidth!==width && setrectwidth(width);
    
          return (
            <rect
              x={rx}
              y={ry}
              height={height}
              width={width}
            />
          );
        }
      };

  return (
    <div className="App" ref={divRef}>
       <svg
        id="svg"
        ref={svgRef}
        onMouseDown={mouseDown}
        onMouseUp={mouseUp}
        onMouseMove={mouseMove}
      >
        {addRectangle() ? (
          addRectangle()
        ) : (
          <rect
            x={rectx}
            y={recty}
            height={rectheight}
            width={rectwidth}
          />
        )}
      </svg>
    </div>
  );

Answer 1

I can see multiple problems with your code:

1. you're calling the event mouseDown and setting the state but you're using addRectangle for your condition instead of just calling it as a function. This will most of the time introduce race condition issues.

2. you then return addRectangle() instead of adding it on an array, this is the reason why the previous rectangle is replaced.

What I suggest is:

const svgRef = useRef<SVGSVGElement>(null);
    const divRef = useRef<HTMLDivElement>(null);
    const { xCord, yCord } = useMousePosition({ divRef });
    const [last_mousey, set_last_mousey] = useState(0);
    const [mousex, set_mousex] = useState(0);
    const [mousey, set_mousey] = useState(0);
    const [rectx, setrectx] = useState(0);
    const [recty, setrecty] = useState(0);
    const [rectwidth, setrectwidth] = useState(0);
    const [rectheight, setrectheight] = useState(0);


   const [rects, setRects] = useState([]);

    const mouseDown = () => {
        setRects(rects.concat(addRectangle(xCord, yCord)));
      };
    
      const mouseMove = () => {
        set_mousex(xCord);
        set_mousey(yCord);
      };
    
      const addRectangle = (last_mousex, last_mousey) => {
          const width = Math.abs(mousex - last_mousex);
          const height = Math.abs(mousey - last_mousey);
    
          const rx = mousex < last_mousex ? mousex : last_mousex;
          const ry = mousey < last_mousey ? mousey : last_mousey;
          rectx!==rx && setrectx(rx);
          recty!==ry && setrecty(ry);
          rectheight!==height && setrectheight(height);
          rectwidth!==width && setrectwidth(width);
    
          return (
            <rect
              x={rx}
              y={ry}
              height={height}
              width={width}
            />
          );
      };

  return (
    <div className="App" ref={divRef}>
       <svg
        id="svg"
        ref={svgRef}
        onMouseDown={mouseDown}
        onMouseMove={mouseMove}
      >
        {rects.length > 0 ? (
          rects.map(rect => rect)
        ) : (
          <rect
            x={rectx}
            y={recty}
            height={rectheight}
            width={rectwidth}
          />
        )}
      </svg>
    </div>
  );

• I removed last_mousex, mousedown, and last_mousey states and pass them directly.
• I changed the mouseDown function and removed the mouseUp they should do the same.
• Added rects so they its an array.
• NOTE: I did not add typescript changes on this one, just add it on your own so you can customize it.

Answer 2

You can achieve it like this

1. Save the rectangles to another state array

const [rectArray, setRectArray] = useState<Array<JSX.Element>>([]);

  const addRectangle = () => {
    if (mousedown) {
      const width = Math.abs(mousex - last_mousex);
      const height = Math.abs(mousey - last_mousey);

      const rx = mousex < last_mousex ? mousex : last_mousex;
      const ry = mousey < last_mousey ? mousey : last_mousey;
      rectx !== rx && setrectx(rx);
      recty !== ry && setrecty(ry);
      rectheight !== height && setrectheight(height);
      rectwidth !== width && setrectwidth(width);

      setRectArray((prevArr) => [
        ...prevArr,
        <rect x={rx} y={ry} height={height} width={width} />
      ]);
    }
  };

2. You should call addRectangleat the last line of mouseUp

  const mouseUp = () => {
    setMouseDown(false);
    addRectangle();
  };

3. Then you can iterate over them to show all the rectangles

  return (
    <div className="App" ref={divRef}>
      <svg
        id="svg"
        ref={svgRef}
        onMouseDown={mouseDown}
        onMouseUp={mouseUp}
        onMouseMove={mouseMove}
      >
        {rectArray.map((rect) => rect)}
      </svg>
    </div>
  );