Dynamically add React components into DIV or another react App

Question

CONTEXT

I'm trying to dynamically add the React component into DIV/Another React component base on event f.g onClick event.

I tried and know I can add any HTML element into DIV by JS, simply by createElement and append into the DIV. But I want to add the react component into DIV.

Problem:

When I append React component into DIV, It will add [object Object], I am looking for a way to be able to render and insert React Components into DIV.

Here is codeSandBox : https://codesandbox.io/s/frosty-bouman-f95mx?file=/src/App.js

    import React from "react";
    import "./styles.css";
    import Button from "./Button";

    const addToCanvos = () => {
      var canvos = document.querySelector(".canvos");
      canvos.append(<Button />);
    };

    export default function App() {
      return (
        <div className="App">
          <Button event={addToCanvos} />
          <div className="canvos" />
        </div>
      );
    }

Matthew Howard · Accepted Answer · 2020-06-11 23:08:38Z

6

Checkout this implementation. Basically you need to use the useState React Hook to store all the components that you want to add as children of the canvas.

export default function App() {
  const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);
  return (
    <div className="App">
      <Button
        event={() => {
          setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);
        }}
      />
      <div className="canvos">{buttonsOnCanvos}</div>
    </div>
  );
}

answered Jun 11, 2020 at 23:08

Matthew Howard

1791 silver badge3 bronze badges

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

2 Comments

AJ- Over a year ago

This solution is awesome. Thanks, Do you think it would be work if we have different components and want to add them at the same time?

Matthew Howard Over a year ago

if you wanted to add multiple components the just add more items to the array setButtonsOnCanvos([...buttonsOnCanvos, <Component1 />,<Component2/>]); If you want to remove the items set the array back to empty setButtonsOnCanvos([])

Mubaraq Wahab · Accepted Answer · 2020-06-11 22:34:28Z

0

You don't need to access the DOM directly. You can have a state to indicate whether to show the .canvos element or not. Then you render the <Button /> in the div conditionally.

export default function App() {
  const [showCanvos, setShowCanvos] = useState(false);

  const addToCanvos = () => {
    setShowCanvos(true)
  };

  return (
    <div className="App">
      <Button event={addToCanvos} />
      <div className="canvos">
        {showCanvos && <Button />}
      </div>
    </div>
  );
}

Notice that I moved the addToCanvos function into the App component.

answered Jun 11, 2020 at 22:34

Mubaraq Wahab

3125 silver badges16 bronze badges

7 Comments

AJ- Over a year ago

This is cool what you mentioned, but this is different by my target, I have different React component, and on click on them I would like to add them into DIV dynamically, Maybe one may instance or multi-instance from the same react component.

AJ- Over a year ago

The main target for me is to able to few React components and let the user add them into DIV and set the position on this DIV, something like drag and drop functionality. But for my first simple task, I add them by click on the component. again I start with one button

AJ- Over a year ago

What if I want to add hundred of them through clicking?

Mubaraq Wahab Over a year ago

Sorry I don't get. You want to add 100 buttons to the div when you click once?

AJ- Over a year ago

Yes, I want if user click on add button, able to add React component to the DIV DOM

|

Collectives™ on Stack Overflow

Dynamically add React components into DIV or another react App

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related