How do I add custom react component to DOM element - Reactjs

tea
March 15, 2023
221 views
0 votes
2 Answers

import SingleInvite from "./SingleInvite";

imported a component that I created , but I keep getting [Object object] on the place of SingleInvite component

 const newInvite = () => {
    const container = document.querySelector(".container");
    if (container) {
      container.innerHTML += `${(<SingleInvite index={index} />)}`;
    }
  };

<div>

calling newInvite

<div className="container">
    <SingleInvite index={0} />
  </div>

  <button className="add-another" onClick={newInvite}>
    <img src={plus} className="plus" alt="" /> Add another
  </button>

Tags: javascript reactjs

Answers

With React, you should avoid directly manipulating the DOM. It goes against all React principles.

Some documentation you might want to read up on: conditional rendering with React

It seems that you are trying to render the newInvite component in the container onClick. A better way would be:

// App.jsx
import React, {useState} from "react";
// Import your component you want to conditionally render
import newInvite from "./components/newInvite/NewInvite";

const App = () => {
// Hold the show/noshow boolean in local state
const [showNewInvite, setShowNewInvite] = useState();

// handle onClick
const handleShowNewInvite = () => {
    setShowNewInvite(true);
};

// render imported <newInvite> if state's showNewInvite === true
return (
    <div className="container">
        <button onClick={() => handleShowNewInvite}>
        { showNewInvite && <newInvite /> }
    </div>
);
}

export default App;

In react, you should not be modifying the dom directly. Instead, have you’ll create one or more state variables, and change those states when you want to rerender. In your case since you want 1-N <SingleInvite>s, the most natural state is an array. I’m not sure what data you’ll need for each element of the array, so i’ll just give them a unique identifier.

let uniqueId = 0;

const SomeComponent = () => {
  const [invites, setInvites] = useState([]);

  const newInvite = () => {
    uniqueId++;
    setInvites(prev => [...prev, { id: uniqueId }]); 
  }

  return (
    <>
      <div className="container">
        {invites.map((invite, index) => (
           <SingleInvite key={invite.id} index={index} />
        )}
      </div>

      <button className="add-another" onClick={newInvite}>
        <img src={plus} className="plus" alt="" /> Add another
      </button>
    </>
  )
}

If you’re sure you’re not going to need any other data besides the number of invites, you could possibly get away with using a number as a state. Though most realworld examples have a little bit of complexity and so you’ll need to use the array approach as shown above.

Here’s an example with a number as the state:

const someComponent = () => {
  const [numInvites, setNumInvites] = useState(0);

  const newInvite = () => {
    setNumInvites(prev => prev + 1);
  }

  const inviteElements = [];
  for (let i = 0; i < numInvites; i++) {
    inviteElements.push(<SingleInvite key={i} index={i} />)
  }

  return (
    <>
      {inviteElements}
      <button className="add-another" onClick={newInvite}>
        <img src={plus} className="plus" alt="" /> Add another
      </button>
    </>
  )
}

Please signup or login to give your own answer.

Click here to cancel reply.

How do I add custom react component to DOM element – Reactjs

Answers