Let's consider this mouse event:

function onm ouseUp(e) {
      e.preventDefault();
      if (isText) {
        mouseSelRect.current.style.left = x1   'px';
        mouseSelRect.current.style.top = x2   'px';
        mouseSelRect.current.style.width = x3   'px';
        mouseSelRect.current.style.height = x4   'px';
        createTextArea(x1, x2, x3, x4);
      }
}

I want to create multiple "instances" per se of textareas every time i make a select rectangle and release the mouse, with the select rectangle created, i can customize the dimensions of a new textArea. The main problem with web developing, however is that the environment heavily encourages being as "declare all elements that you need before rendering page" as possible.

I would like to know if it is even possible to create out of a event a new element that is not necessarily on the return part of a hook.

CodePudding user response：

the createTextArea function can return a component and you can maybe add the component to a list of components (a state, for example)

const List = () => {
  const [componentList, setComponentList] = React.useState([])
  const onm ouseUp = (e) => {
          e.preventDefault();
          if (isText) {
            mouseSelRect.current.style.left = x1   'px';
            mouseSelRect.current.style.top = x2   'px';
            mouseSelRect.current.style.width = x3   'px';
            mouseSelRect.current.style.height = x4   'px';
            const component = createTextArea(x1, x2, x3, x4);
            setComponentList([...componentList, component])
          }
    }

  return (
    <div>{componentList.map(Component => <Component />)}</div>
  )
}

I don't know exactly what you want to do with the components list, but in the example above I just rendered it. But you can use the array to do whatever you want to.

CodePudding user response：

It is definitely possible to create new elements and trigger a re-render of the page to include those elements. That's what the framework is intended for: dynamic page content that responds to changes in state. (Check https://www.w3schools.com/react/react_intro.asp or elsewhere for introductory material that will demonstrate it.)