React Js MutationObserver | Detect Changes in Element

    const { useState, useEffect } = React;

​

    function App() {

      const [svgSize, setSvgSize] = useState('');

      const [svgHtml, setSvgHtml] = useState('');

​

      useEffect(() => {

        const svgIcon = document.querySelector("#svg-icon svg");

        svgIcon.style.width = `${svgSize}em`;

        svgIcon.style.height = `${svgSize}em`;

​

        setSvgHtml(svgIcon.outerHTML);

​

        const observer = new MutationObserver((mutationsList) => {

          for (const mutation of mutationsList) {

            setSvgHtml(document.querySelector("#svg-icon").innerHTML);

          }

        });

        observer.observe(document.querySelector("#svg-icon svg"), {

          attributes: true,

        });

      }, [svgSize]);

​

      return (

        <div className="container">

          <h3>React Js MutationsObsever detect changes in element  </h3>

          <div className="svg-container" id="svg-icon">

            <svg viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">

              <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34" />

            </svg>

          </div>

          <div className="slider-container">

            <input

              type="range"

              className="form-range"

              min="1"

              step=".1"

              max="10"

              id="svg-change-size"

              value={svgSize}

              onChange={(e) => setSvgSize(e.target.value)}

            />

          </div>

          <div className="col-sm-8">

            <div className="code-editor mt-3">

              <pre>

                <code className="language-css" id="code-editor">

                  {svgHtml}

                </code>

              </pre>

            </div>

          </div>

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>