How to appendChild custom component using React JS and Typescript?

Question

I have some code like

const ParentComponent = () => {
  let child = <ChildComponent {...props} />;
  if (condition) {
    const parent = document.GetElementById("parentId");
    //Here is a problem
    parent.appendChild(child);
  }
  return (
    <>
      <div id="parentId"></div>
    </>
  );
};
export default ParentComponent;

const ChildComponent = () => {
  return (
    <>
      <div></div>
    </>
  );
};
export default ChildComponent;

I want to dynamically add child components multiple times but getting an error

I am happy to do it in any way using Javascript or useRef. Thanks!

The main problem is you shouldn't be mixing React with native DOM methods like that. — Andy
– Andy, Commented Nov 28, 2021 at 22:04
Is there a reason why you're not using JSX to conditionally render the element instead? Even if you want to do it through native DOM methods, you have several issues: (1) you have a typo in your document.GetElementById (it should be lowercase 'g', (2) you are not waiting for the virtual DOM to be rendered (and be available in the real DOM) before appending it. See useEffect. — Terry
– Terry, Commented Nov 28, 2021 at 22:25

Nicholas Tower · Accepted Answer · 2021-11-28 23:04:02Z

1

The standard way to do conditional rendering in react is as follows:

const ParentComponent = () => {
  return (
    <>
      <div id="parentId">
        {condition && <ChildComponent {...props } />}
      </div>
    </>
  );
};
export default ParentComponent;

You mentioned wanting to do it multiple times, though you didn't show an example of what you have in mind. You can create an array and fill it with however many child elements you want. For example:

const ParentComponent = () => {
  const [childCount, setChildCount] = useState(8);

  const children = [];
  for (let i = 0; i < childCount; i++) {
    if (condition) {
      children.push(<ChildComponent {...props } />);
    }
  }

  return (
    <>
      <div id="parentId">
        {children}
      </div>
    </>
  )
}

answered Nov 28, 2021 at 23:04

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to appendChild custom component using React JS and Typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related