Newbie to react here.

TLDR: I have a helper function called createNotification which when called inserts a <ToastNotification /> ponent into a container element using render(). If I use createPortal() nothing is appended. If I use render, the ponent is only added once despite multiple triggers.

Can anyone help me figure out whats happening please?

Thank you

helpers.js

import { ToastNotification } from "carbon-ponents-react";
import { render, createPortal } from "react-dom";

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container); //just to check function is running and has found container
  return render(<ToastNotification />, container); //works but only once, not on multiple triggers
  return createPortal(<ToastNotification />, container); //doesn't render anything in container
};

the function above is called from other ponents as needed:

login.js

import { createNotification } from "../../helpers";

const Login = () => {
  const validateLogin = async (event) => {
    createNotification();
    // validation logic
    performLogin();
  };

  const performLogin = async () => {
    //axios call here
  };

  // main ponent content
  return (
    <>
     <!-- validateLogin() called on form submit -->
    </>
  );
};

export default Login;

app.js

//imports

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

Thank you

Newbie to react here.

TLDR: I have a helper function called createNotification which when called inserts a <ToastNotification /> ponent into a container element using render(). If I use createPortal() nothing is appended. If I use render, the ponent is only added once despite multiple triggers.

Can anyone help me figure out whats happening please?

Thank you

helpers.js

import { ToastNotification } from "carbon-ponents-react";
import { render, createPortal } from "react-dom";

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container); //just to check function is running and has found container
  return render(<ToastNotification />, container); //works but only once, not on multiple triggers
  return createPortal(<ToastNotification />, container); //doesn't render anything in container
};

the function above is called from other ponents as needed:

login.js

import { createNotification } from "../../helpers";

const Login = () => {
  const validateLogin = async (event) => {
    createNotification();
    // validation logic
    performLogin();
  };

  const performLogin = async () => {
    //axios call here
  };

  // main ponent content
  return (
    <>
     <!-- validateLogin() called on form submit -->
    </>
  );
};

export default Login;

app.js

//imports

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

Thank you

• javascript
• reactjs
• react-dom
• carbon-design-system

• did you render createNotification or whole app by render funtion ? – Robert Commented Nov 28, 2021 at 12:03
• app.js was return() and createNotification() is called in the Login() ponent (code added above) – rugy Commented Nov 28, 2021 at 12:51

2 Answers 2

Solved this myself by adding the createPortal() within the render().

If anyone can provide an explanation, it would be much appreciated.

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container);
  return render(createPortal(<ToastNotification />, container), document.createElement("div"));
};

createNotification aren't mounted in ponent in app Virtual Dom... when you use render(createPortal) then you just create spearted app.

import { createNotification } from "../../helpers";

export const createNotification = () => {
    const container = document.getElementById("notificationContainer");
    console.log(container); //just to check function is running and has found container
    return createPortal(<ToastNotification />, container); //doesn't render anything in container
};

const Login = () => {
    const [validate, setValidate] = useState(false);
    
    const validateLogin = async (event) => {
        if('some logic')
            return setValidte(true)
        setVAlidte(false)
    };


    useEffect(() => {
        if(!valite)
            return;
        //axios heare
    }, [validate])
    // main ponent content
    
    
    return (
        <>
            {!validate && <CreateNotfication/>}
            <!-- validateLogin() called on form submit -->
        </>
    );
};