Refactor getElementById() with the use of useRef

[masakudamatsu]

Read https://reactjs.org/docs/refs-and-the-dom.html carefully

[masakudamatsu]

To forward ref to a child component, we need

• React.forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref
• useImperativeHandle() https://reactjs.org/docs/hooks-reference.html#useimperativehandle

which will make the code complicated. In these cases, we keep using getElementById().

• The problem with getElementById() is that it causes multiple elements with the same id when the same component is reused many times.
• But we don't use same component multiple times within the same page.

[masakudamatsu]

Now I know how to use React.forwardRef() and useImperativeHandle. So we will refactor getElementById().

[masakudamatsu]

Done for the x-height value box.

For the modular scale boxes, we cannot use forwardRef because we have two components to refer to.

Instead we will change the composition:

• Cut the two ModularScaleInput components In ModularScaleBoxes.js and paste them as attribute values for ModularScaleBoxes in ModularScale.js.
• Refer to each component with React.useRef.